CSS预编译语言less

一、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里面的文字大小

案例：旧苏宁易购

项目链接：