rem是相对于 根元素 的字体大小的单位
rem能等比例适配所有的屏幕，根据html的字体的大小来控制rem的大小
2.dpr设备像素比
dpr = 物理像素 / 逻辑像素
物理像素：设计图量出的px（设备显示的px）
逻辑像素：css中设置的px
如果设计图的宽度是640px 或者 750px dpr = 2
如果设计图的宽度是1080px dpr = 3
3.vw
视窗宽度
1vw 等于视窗宽度的1%
100vw 等于视窗宽度的100%
4.vw 与 px 之间的换算
如果设计图的宽度是640px 则 dpr = 2
所以：逻辑像素 = 640px /2 = 320px
所以：320px = 100vw
所以：1vw = 3.2px
所以：31.25vw = 100px = 1rem
如果设计图的宽度是750px 则 dpr =2所以：逻辑像素 = 750px /2= 375px
所以：375px = 100vw
所以：1vw =3.75px
所以：26.67vw = 100px = 1rem
如果设计图的宽度是1080px 则 dpr = 3所以：逻辑像素 = 1080px / 3 = 360px
所以：360px = 100vw
所以：1vw =3.6px
所以：27.78vw = 100px
5.根元素字体大小的限制
如果设计图宽度为640px
则：根元素设置为
html{font-size:31.25vw}
如果设计图宽度为750px
则：根元素字体大小设置为
htmt：{font-size:26.67vw}
如果设计图宽度为1080px
则根元素字体大小设置为
html:{font-size:27.78vw}
6.计算方法：
为了方便计算：1rem = 100px,,所以，要除以100
已知 dpr = 2
如果量取设计图的某部分 宽度 300px
物理像素-------逻辑像素-------rem
则：300/2/100 = 1.5rem
7. rem是相对于根元素的字体大小的单位，能等比例适配所有的屏幕，根据html的字体的大小来控制rem的大小
如果设计图为 640px
根元素font-size=31.25vw 相当于100px,相当于 1rem
如果设计图为750px
根元素font-size=26.67vw 相当于100px,相当于 1rem
一般，我们要在公共样式中根据设计图的大小，设置根元素字体的大小，单位为vm，
如果设计图为640px,html{font-size:31.25vw}
如果设计图为750px，html{font-size:26.67vw}
然后，我们量取得px/2/100即：物理像素/2/100
方法一：
可以使用vw或vh这样的“相对”字体大小单位。vw代表文字相对于viewport的宽度，vh则代表相应的高度。在vw的体系中，默认将整个viewport的宽度设置为100vw，以此相对换算文字的大小。
如图：
除vw、vh外，还有vmin和vmax两种相对字号单位，其作用是自动选择相对于viewport宽高而言最小或最大的值，以此作为字体的大小。
方法二：
face 字体名称列表 定义font元素中文本的字体。 字体名称列表中的字体不存在就显示默认字体。
示例：
<font face="幼园">font元素中文本</font>
<font face="宋体">font元素中文本</font>
<font face="黑体">font元素中文本</font>
px: 绝对字体大小
em: 基于一个基数来计算出相对字体大小。(移动端用的少)
rem: 基于根节点（html）的字体大小来计算。
vw: 可视区宽度单位。1vw等于可视区宽度的百分之一。
跟字体大小有关
l浏览器默认字体是16px,这里父级字体大小是20px,所以#box里的1em = 20px即#box是一个长宽均为400px的正方形
vw单位和百分比很相似，不同的是vw的值对所有的元素都一样， 与他们父元素或父元素的宽度无关
以414宽度的屏幕为例
做一个200 * 200的盒子
rem 的字体大小直接与html的字体大小有关。默认是16px = 1rem
我们可以给html设置10px的字体大小
大多数浏览器（不包括ie8以下）都支持rem单位，如果想都支持，可以
可是这样在实际开发中，换算起来非常麻烦，所以，我们对此进行了修改，根据手机屏幕的大小，做了自适应。
首先，我们在html的head里边设置html的font-size.
然后根据设计图的尺寸和手机屏幕的尺寸进行换算。
