一，今日所学内容
1.什么是rem
1）rem（root em）是一个相对单位，和em不同的是rem相对基准是对于html元素的字体大小来说的
比如：html设置的字体大小font-size:12px; 非根元素设置的具体的单位是 width:2rem; 换算成px单位就是24px。
2）优点：
父元素的字体大小可能不一样，但是整个页面只有一个html标签，可以很好的控制整个页面的元素大小。
2.媒体查询
1）什么是媒体查询
媒体查询是css3的新语法
使用 @media 来进行查询，可以针对不同的媒体类型定义不同的样式
也可以根据不同的屏幕尺寸来设定不同的样式
2）媒体查询的语法规范
用@media 来进行开头
mediatype 媒体类型
all：用于所有的设备
print：用于打印设备或者打印预览
screen：用于电脑屏幕、平板电脑或者手机等。
3）关键字 and not only
and：相当与且的意思，将多个媒体特性连接在一起
not：相当于非的意思，排除某个媒体类型（可以省略）
only：相当于只有的意思，指定某个特定媒体类型（可以省略）
4）media feature 媒体特性，在小括号中书写
width：定义输出设备中页面可见区域的宽度
min-width：定义输出设备中页面最小可见区域的宽度
max-width：定义输出设备中页面最大可见区域的宽度
3.LESS
维护CSS的弊端
CSS是一门非程序式语言，没有变量、函数、作用域的概念。
CSS书写的时候会写大量的看似没哟逻辑代码，冗余程度比较高。
不方便扩展和复用
CSS没有很好的计算能力
4.Less的编译
下载插件Easy Less 将 less文件编译为css文件
5.Less的嵌套
6.Less的运算
任何的数字、颜色或者变量都可以参与运算
基本的运算符有：加（+）、减（-）、乘（*）、除（/）
语法规范：
运算符左右两边要有空格隔开
除法运算需要在运算外加括号，否则不生效
对于两个不同的单位的值之间的运算，运算结果取前面的值的单位
如果两个参与计算的数值，只有一个值有单位，那么就用有单位的值的单位
7.Rem的适配方案
less+rem+媒体查询
原理
让一些不能等比例自适应的元素，达到不同的尺寸时，根据html字体的大小变化来用rem作为单位，控制元素进行自适应变化。
8.rem的实际开发适配方案
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
③每一份作为html字体大小，这里就是50px
④那么在320px设备的时候，字体大小为320/15就是 21.33px
⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
⑥比如我们以750为标准设计稿
⑦一个100*100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem*2rem 比例是1比1
⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是42.66 但是宽和高的比例还是 1比1
⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
1）flexible.js+rem
flexble.js+rem适配方案
手机淘宝团队出的简洁高效 移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
我们要做的，就是确定好我们当前设备的html 文字大小就可以了
比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
里面页面元素rem值： 页面元素的px 值 / 75 剩余的，让flexible.js来去算
|
