rem适配布局

一.rem基础

1.rem是一个相对单位，类似于em，em是相对于父元素字体大小来说的；
2.不同的是rem的基准是相对于html元素的字体大小；
3.rem的优点就是可以修改html中的文字大小来改变页面中元素的大小来实现整体控制；

二.媒体查询

1.Media Query 是CSS3新语法，可以针对不同的屏幕尺寸设置不同的样式
2.语法规范：@media meidatype and | not | only（media feature）
（1）mediatype查询类型：
用于所有设备：all
用于打印机和打印预览：print
用于电脑屏幕，平板电脑，只能手机：scree
（2）关键字
将多个媒体特性连接到一起：and
排除某个媒体类型：not
指定某个特定的媒体类型，可以省略：only
（3）媒体特性meida feature
定义输出设备中页面可见区域的宽度：width
定义输出设备中页面最小可见区域宽度：min-width
定义输出设备中页面最大可见区域宽度：max-width
3.媒体查询+rem实现元素动态大小变化
媒体查询+rem:实现不同设备宽度，实现页面元素大小的动态变化

4.引入资源
当样式比较繁多时，针对不同的屏幕尺寸，调用不同的CSS文件

三.less基础

CSS的弊端：不利于维护和扩展，没有很好的计算能力
1.Less介绍
less时一门CSS扩展语言，也称为CSS预处理器，它在CSS的语法基础上，引入了变量，运算，函数等功能，大大简化了CSS的编写，并降低了CSS的维护成本
2.Less使用
（1）less变量@变量名：值
3.less编译
Easy LESS插件用来把less文件编译为css文件
4.less嵌套
less嵌套子元素的样式直接写道父元素里面就行；
如果遇见（交集 | 伪类选择器）：
内层选择器前面没有&符号，则它被解析为父选择器的后代
如果有&符号，它就被解析为父元素自身或父元素的伪类
5.less运算
①任何数字、颜色或者变量都可以参与运算
②运算符中间左右有个空格隔开
③两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
④两个数都有单位，而且是不同的单位，最后的结果以第一个单位为准

四.rem适配方案

1.rem实际开发适配方案
①按照设计稿和设备宽度的比例，动态计算并设置html根标签的font-size大小
②CSS中，设计稿元素的取值，按照同等比例换算成rem为单位的值；

2.rem适配方案技术使用
①less+媒体查询+rem
②flexible.js+rem