less基础 Less基础# 维护css的弊端# CSS是一门非程序式语言，没有变量、函数、SCOPE(作用域)等概念。 CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。 不方便维护及扩展，不利于复用。 CSS没有很好的计算能力。 非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目。 Less介绍# ...

媒体查询 /* html { font-size: 100px; } */ /* 这句话的意思：在屏幕上，并且，最大的宽度是800像素，设置想要的样式 */ /* max-width小于等于800px */ /* 媒体查询可以根据不同的屏幕尺寸改变不同的样式 */ /* 小于540px 页面背景颜色变为蓝色 */ @media screen and (max-width: 539px) { body { background-color: skyblue; } html { ...

移动web开发rem适配布局 html { font-size: 14px; } .outer { width: 200px; height: 200px; background-color: purple; font-size: 12px; } .div3 .inner { margin: 0 auto; /* 1.em相对于父元素的字体大小来说 */ width: 10em; /* 2.rem相对于html元素字体大小来说 */ ...

流式布局 * { margin: 0; padding: 0; } section { margin: 0 auto; width: 100%; max-width: 1000px; min-width: 700px; } section div { float: left; width: 50%; height: 200px; } section div:nth-child(1) { ...

移动端开发选择 .box { display: inline-block; vertical-align: bottom; width: 100px; height: 100px; padding: 10px; } .box:nth-child(1) { /* 传统盒模型 */ box-sizing: content-box; background-color: pink; border: 10px solid red; } .box:nt...

二倍图 .cat { width: 500px; height: 500px; border: 2px solid red; background: url(/assets/images/mobile/cat01.jpg) no-repeat; /* background-size: 500px 200px; */ /* background-size: 500px; */ /* background-size: 50%; */ /* background-size: contain; */ background-size: cover;...

视口 视口# 视口（viewport） 就是浏览器显示页面内容的屏幕区域，视口可分为布局视口、视觉视口和理想视口 布局视口 layout viewport # 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期PC端页面在手机上显示的问题 iOS，Android基本上都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 ...

移动端基础 移动端基础# 浏览器现状# PC端常见浏览器# 360、谷歌、火狐、QQ、百度、搜狗、IE 移动端常见浏览器# UC、QQ、opera(欧朋)、百度、360、谷歌、搜狗、猎豹，以及其它杂牌浏览器 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。 总结：兼容移动端主流浏览器，...

节流阀 节流阀# 防止轮播图按钮点击造成播放过快。 节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。 核心实现思路： 利用回调函数，添加一个变量来控制，锁住函数和解锁函数。 开始设置一个变量var flag=true; 关闭水龙头 if(flag){   flag=false;   do something; } 利用回调函数，动...