移动端布局有很多做法，例如流式布局，固定宽度，Media Queries响应式布局，rem。
流式布局：在页面布局的时候通过百分比来定义宽度，但是高度大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点。
固定宽度：在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小。
Media Queries响应式布局：最明显的缺点是工作大，维护性难。
rem实现等比例适配所有屏幕：为了适配各种大屏手机，目前最好用的方案莫过于使用相对单位rem, 它是CSS3新增的一种单位，是相对于根元素html的字体大小的单位，简单的说它就是一个相对单位。
基于rem的原理，我们要做的就是: 针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。
1、基准值的计算公式：
基准值 = document.documentElement.clientWidth * dpr / 10
乘以dpr，是因为页面有可能为了实现1px border页面会缩放(scale) 1/dpr 倍(如果没有，dpr=1)。
基准值就是fontsize 假如 是苹果6 dpr为2 苹果6s dpr为3（1个物理像素 显示两个css像素）
已知 苹果6的尺寸是375 基准值= 375 * 2 / 10 = 75 (表示 1rem = 75px)
同理 苹果6s的尺寸是414 基准值= 414 * 3 / 10 = 124.2 (表示 1rem = 124.2px)
除以10，是为了取整，方便计算(理论上可以是任何值)
所以 通过不同大小屏幕的 基准值 的改变 来 进行缩放
1.要根据不同的屏幕计算 font-size js插件来完成 淘宝插件 flexible.js
<meta name="viewport" content="width=devide-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
<meta content="" name="flexible" />
不要写这两个mata ，写了dpr会默认位1 ，活着为一指定数值了
注意每次切换的时候要刷新下页面，drp才会变的。。。。
- rem 自动计算插件 https://github.com/flashlizi/cssrem
其它注意点
- 兼容 1px 问题
考虑到 1px 转换为 rem 会有小数bug，工作流中会忽略 1px 的转换，最小转换数值为 2px。
- 雪碧图兼容问题
为避免雪碧图遇到小数计算 bug，设置雪碧图内各个元素之间的间隙为 4px
总结：rem
1.其实就是把设计图单位 px 换成 rem ， rem是html的font—size，默认基准16px = 1 em
2.然后js自己判断不同的屏幕 ，改变默认基准值 基准值 = document.documentElement.clientWidth * dpr / 10
3.在不同屏幕下rem的基准值变了，而我们是以rem为单位的，那页面元素的尺寸也就等比例变了。
一句话，在不同屏幕下改变rem的默认基准值，页面元素的尺寸也就等比例变
网友评论