什么是rem
这个单位代表根元素的 font-size 大小（<html> 元素的font-size）。
当用在根元素的font-size上面时 ，它代表了它的初始值
——MDN
/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
html {font-size: 2rem}
/* 作用于非根元素，相对于根元素字体大小，所以为64px */
p {font-size: 2rem}
移动端的设计思想
移动设备适配的效果是让不同设备尺寸看到的效果，也就是看到的比例是相同的就好了，用代码来写也就是：
某像素转换后的大小 某像素转换后的大小
______________________ = _______________________
a屏幕宽度 b屏幕宽度
某像素转换后的大小是某某rem，我把它叫做Xrem，由此得：
Xrem Xrem
___________ = ____________
a屏幕宽度 b屏幕宽度
1rem = 屏幕宽度/份数（这个没有为什么，这是直接就能拿到的结果，是rem的思想）
那么某像素（Ypx），等于多少rem呢？
Ypx / 1rem => Ypx / (屏幕宽度 / 份数)
由此可以导出，rem的换算公式：
Ypx = （Y * 份数 / 屏幕宽度）rem
如何利用rem实现移动端的适配？
- rem + js 去实现移动端的适配
- js部分做了两步
- HTML加载完成后，根据屏幕的宽度去计算出rem，也就是HTML的fontSize的大小
- 监听窗口的变化，窗口变化便重新设置rem的大小
rem方案存在的问题
noscript问题，字体问题（浏览器最小支持12px），解决屏幕过宽问题（视觉感受不好，比如PC端的显示屏）
移动端
- window.screen 地址
- Element.getBoundingClientRect() 地址
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">- 掘金地址
