WEB移动端rem布局
REM的基础
REM单位
rem（root em）是一个相对单位，类似于em，em是相对于父元素字体的大小
不同的是rem是相对于html元素的字体大小来定义的
比如：html元素设置的font-size的值是20px，那么2rem的对应的像素大小就是40px
rem的优势：父元素的文字大小可能会不一致，一个元素也可能会有多个父级元素，但是整个页面只有一个html标签，所以我们可以通过改变html的字体大小，来控制整个页面的所有元素的尺寸。
媒体查询
什么是媒体查询
媒体查询是可以帮助我们查询不同的屏幕宽度来进行相应的设置
使用@media 查询，可以针对不同的媒体类型来定义不同的样式
当我们重置浏览器的时候，页面会根据媒体查询来重新渲染页面
目前我们主要的媒体查询是针对移动端的：比如手机、平板等等。
媒体查询的语法规范
用@media 开头
mediatype 媒体类型
all 用于所有设备
print 用于打印设备和打印预览
screen 用于电脑屏幕、平板、手机等等（主要使用这个类型）
关键字 and not only
and 可以将多个媒体特性连接起来，相当于且的意思
not 排除某个媒体类型，相当于非的意思，可以省略
only 指定某个特定的媒体类型 可以省略
media feature 媒体特性，必须放在小括号中
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域
max-width 定义输出设备中页面最大可见区域
@media mediatype and|not|only （media feature） { CSS的样式代码}
LESS基础
CSS的弊端
CSS是一门非程序式的语言，没有变量、函数、作用域等概念
CSS需要书写大量的没有逻辑的代码，CSS的冗余程度是比较高的
CSS没有很好的计算能力
如果是没有很多经验的工程师比较难写出易于维护的CSS代码的
Less的介绍
LESS（leanerStyle Sheets的缩写），是一门CSS的扩展语言，也称为CSS的预处理器。、
它在原有的css的基础上增加了新的程序式语言的特性，比如：函数、变量、计算等等。
常见的CSS的预处理器：Sass、Less、Stylus。
Less中的变量使用
变量是指没有固定的值，并且可以改变里面装的值。简单理解就是一个装具体值的一个盒子
@变量名: 值；
注意点：
必须要以 @ 开头
不能包含特殊字符
不能以数字开头
大小写敏感（@Color 和@color 是两个变量）
Less的编译
下载编译插件 easy less
创建less文件
书写代码后保存会自动生成css文件
Less的嵌套
less代码
生成的css代码
Less运算
任何的数字、颜色或者变量都可以参与计算，less为我们提供了加(+)、减(-)、乘(*)、除(/)算术运算。
注意点：
除法必须要加括号
运算符的左右两边要用空格隔开 1px + 50
如果多个值参与计算，最终的单位选择最先出现单位的这个值的单位。
REM适配方案
原理
让一些不能等比例自适应的元素，当设备的尺寸发生变化的时候，能够等比例进行适配
使用媒体查询根据不同的设备，设置不同的html的字体大小，然后页面用rem做尺寸单位，当html字体变化的时候，页面元素也会跟着变化
技术方案
less+rem+媒体查询
方案一
假设设计稿是750px
假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
每一份作为html字体大小，这里就是50px
那么在320px设备的时候，字体大小为320/15就是 21.33px
用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
比如我们以750px宽度为标准设计稿
一个100*100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem*2rem 比例是1比1
320屏幕下， html字体大小为21.33px 则 2rem= 42.66px 此时宽和高都是42.66 但是宽和高的比例还是 1比1
但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
总结
1、页面元素的rem值 = 页面元素的px值 / html的font-size的大小
2、html的font-size大小 = 屏幕宽度 / 划分的份数
方案二
手机淘宝团队出的简洁高效 移动端适配库
我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理
它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。
我们要做的，就是确定好我们当前设备的html 文字大小就可以了
比如当前设计稿是 750px， 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以
里面页面元素rem值： 页面元素的px 值 / 75 剩余的，让flexible.js来去算
下载css rem插件，并且改变默认字体为75px
|
