今天：

做移动端rem动态布局

明天：

任务4

问题：

基于设备视口的宽度换算根元素font-size的大小。

每次当设备打开时js会查找当前视口的宽度，因此f12手机模拟器调试查看的时候，拖动调试大小时请刷新，以便于js重新查找当前视口宽度。

当然，在手机上不会有这个问题，因为手机的屏幕宽度固定。

收获：

首先我们先来认识css的一些长度单位：

px：像素

em：表示自身元素font-size的计算值，如果自身没设置font-size，则继承父元素font-size的计算值

rem：root rem   根元素font-size的计算值

vh：viewport  height     视口的高度

vw: viewport  width   视口的宽度

还有一些不常用的：

ex：这个单位表示元素font的 x-height 。在含有“X”字母的字体中，它是该字体的小写字母的高度；对于很多字体， 1ex ≈ 0.5em。

ch：这一单位代表元素所用字体 font中“0”这一字形的宽度（“0”，Unicode字符U+0030），或更准确地说是“0”这一字形的预测尺寸（advance measure）。

lh：等于元素行高line-height的高度

rlh：等于根元素行高line-height的高度

——摘自MDN    

https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

手机端方案的特点

所有手机显示的界面都是一样的，只是大小不同

1 rem == html font-size == viewport width

使用css的rem属性来适配不同移动屏幕尺寸似乎是个不错的主意~~

通过js计算算出屏幕宽度，然后确定比例，于是每进入一次设备将会根据设备视口的宽度来调整比例。

例如设计图的宽度为320px，那么我们以320的基数设置html字体的font-size：12rem