rem是什么
rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高
三个相关概念
1.viewport
视窗：设备屏幕用来展示网页的可视化区域
<meta name="viewport" content="width=device-width,initial-scale=1.0">
使用rem布局，设置网页宽度等于设置设备宽度，缩放为1倍。
2.物理像素和网页像素
3.设计尺寸和开发尺寸
Ui设计师是基于物理像素，会是我们写样式的逻辑像素的两倍，真实设备尺寸750做图，前端基于网页开发，开发尺寸基于375
rem布局实现方案
- 动态改变html的font-size值，页面元素使用rem布局，html默认大小是16px
- 设置基准值为100px。这个基准值很关键，后面的css换算，都和这个基准值有关
- 屏幕宽度/750 * 100 = html font-size (基准值计算)
- 假设屏幕宽度是750,750/750 *100 = 100,对应iphone6 375网页像素 375/750 * 100 = 50
这样就设置好了每个页面的根fonts-size，因为rem单位是基于根font-size，因此只要确定一种设计稿对应手机的换算，其余屏幕尺寸均可自动适配。
上面我们得出设计稿换算rem的基准值是100，因此只需要把设计稿上的px值除以100即为我们要的rem值。
Px/100=rem，所以100px=1rem,25px=0.25rem
总结：
我们只需以iPhone6的设计稿（当前主导的机型），750px宽完成一套页面，当去到其他设备时，因为我们用的都是rem值，只需要通过JS动态获得当前的dw，再通过动态获取的dw改变html的font-size值，页面的其他元素也会因为html的改变而进行等比例缩放。
