一、rem单位
rem单位（root em）是一个相对单位，类似em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小
比如，根元素(html)设置font-size=12；非根元素设置width: 2rem 则换算成px为24px。
二、媒体查询
媒体查询（media query）是css3的新语法
可以针对不同的屏幕的尺寸设置不同的样式；重置浏览器的同时会根据浏览器的宽度和高度重新进行页面的渲染
CSS的弊端：CSS实际上是一种非程序式语言，没有变量、函数、作用域等相关的概念。
三、LESS的出现
Less是CSS的预处理语言，它拓展了CSS的动态特性。
3.3 Less变量
@变量名：值;(1) 不可包含特殊字符
(2) 不能由数字开头
(3) @前缀不可以省略
(4)大小写敏感
@pinkcolor:pink;body{background-color: @pinkcolor;
}3.4 Less的嵌套
body{background-color: @pinkcolor;a{color: @pinkcolor;}
}less嵌套的子元素直接写在父元素里面
伪元素选择器
a{background-color: #fff;&:hover{color: #fff;}&::before{content：“”；display: block;}}3.5 Less的运算
（1） 我们运算符的左右两侧必须敲一个空格隔开
（2） 两个数参与运算，如果只有一个数带有单位，则最后的结果就和带单位的这个一样
（3） 如果两个数参加运算，两个都有单位，并且是不一样的单位，最后的结果以第一个单位为准
ps：甚至颜色也可以进行运算
四、Rem适配方案
1. 让一些不能等比自适应的元素，达到当设备尺寸发生变化的时候，等比例适配当前设备
2. 使用媒体查询根据不同设备按比例设置html的字体大小，让后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比缩放的适配
3. 两种技术方案
（1）less+媒体查询+rem
（2）flexible.js+rem
两种方案目前都存在，方案2更简单
1. 首先我们选一套标准尺寸 750为准
2. 我们用屏幕尺寸去除以我们划分的份数 得到html中的文字的大小 但是我们知道不同屏幕下得到的文字大小是不一样的
3. 页面元素的rem值 = 页面元素在750像素下的px值 / html里面的文字大小
案例：旧苏宁易购
项目链接：
