rem适配处理

rem 布局

rem 作用于非根元素时，相对于根元素字体大小；rem 作用于根元素字体大小时，相对于其出初始字体大小——MDN@
初始大小是 16px

举例: 1.html{font-size:16px;} 1rem 相当于 16px 2.html {font-size: 2rem} 表示字体为 2rem 作用于根元素字体大小时 相当于对初始大小(16px)的操作,此时为 32px 3.p {font-size: 2rem} 作用于非根元素时, 即相对于根元素字体的大小 即为 2*32=64px

响应式布局的准则

1. 内容区块可伸缩：内容区块的在一定程度上能够自动调整，以确保填满整个页面
2. 内容区块可自由排布：当页面尺寸变动较大时，能够减少/增加排布的列数
3. 边距适应：到页面尺寸发生更大变化时，区块的边距也应该变化
4. 图片适应：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用
5. 内容能够自动隐藏/部分显示：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏
6. 导航和菜单能自动折叠：展开还是收起，应该根据页面尺寸来判断
7. 字体比例缩放时，字体也保持缩放

Rem 布局原理

• rem 布局的本质是等比缩放，一般是基于屏幕宽度
• 先按定高宽设计出来页面，然后转换为 rem 单位,配合 js 查询屏幕大小来改变 html 的 font-size,达到整个页面的缩放
• rem 是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询

实际开发中的 rem 适配方案

简洁高效 rem 适配方案 flexible.js

是手机淘宝团队出的简洁高效移动端适配库,不需要写不同屏幕的媒体查询,flexible.js 已经完成了不同屏幕的适配我们只需要对当前设备的 html 文字字体大小进行设置即可.它的原理是把设备划分成 10 等份，但在不同设备下，比例还是一致的

比如当前设计稿是 750px 那么只需要把 html 文字大小设置为 75px 里面页面元素 rem 值：页面元素的 px 值/75

元素大小取值的计算

屏幕的宽度 / 划分的份数就是 html 根元素字体(font-siz)的大小
页面元素的 rem 值 = 页面元素值 （px） / html font-size 字体大小
最后的公式：页面元素的 rem 值 = 页面元素值（px） / (屏幕宽度 / 划分的份数)

问题解答:

1. 为什么不用百分比呢？
   答:百分比是相对于父元素计算的，使用不方便，而且 rem 多了个字体变化。
2. 为什么不使用 viewport 等比缩放？
   答:<meta name=" viewport " content=" width=320, maximum-scale=1.3, user-scalable=no "> 这种做法是将屏幕等比缩放，缩放过大时会失真