移动端rem适配布局总结

1.rem基础

rem 是单位

rem（root em）是一个相对单位，类似于em，em是父元素字体大小

不同的是rem的基准是相对于html的文字大小。

比如，根元素（html）设置font-size=12px；非根元素设置width：2rem；则换成px表示就是24px。

优点：

·通过修改html文字大小改变页面元素大小

2.媒体查询

媒体查询（Media Query）是CSS3的新语法。

·@media 可以针对不同的屏幕尺寸设置不同的样式

语法规范:

· 用@media开头 注意@符号

· mediatype 媒体类型

· 关键字 and not only

· media feature 媒体特性 必须有小括号包含

3.rem适配方案

rem + 媒体查询 + less

元素大小取值方法:

1 · 最后的公式：页面的元素的rem值 = 页面元素值（px）/ （屏幕宽度 / 划分的分数）

2 · 屏幕宽度 / 划分的份数 就是html 的font-size 的大小

3 · 或者：页面元素的rem值 = 页面元素值（px）/ html font-size 字体大小。

Ps: 个人喜欢用vh vw