rem介绍、vw、vh实现等比例缩放

rem解决移动端等比例缩放

1.  三个单位之争：px、em、rem

（1）px是像素的意思，例如：50px就是50像素的大小，就是组成我们图像的最小单位，指的是将图像放很大会发现里面是由1小格小格组成，那一个小格就是1个像素点； 

（2）em：相对单位，指的是相对于父元素的字体大小；1em是1倍的父元素字体大小，2em是2倍的父元素字体大小；

（3）rem：相对单位，指的是 相对于根元素（html）字体大小，1rem就是1倍的html字体大小，10rem就是10倍的html字体大小；

2.  rem详细介绍：

当然这个html的字体大小首先是要设置好的，如下图所示：

我们之前设置盒子的宽和高用的都是px单位，设置的是固定的宽和高，但是因为每个移动端设备的分辨率不同，这个宽和高在这个手机上刚好合适，但是在另一个手机上就不合适了，所以我们是能采用百分比就百分比，能弹性盒弹就性盒，但是避免不了盒子设置固定的高度， 所以我们就不要用px了，用rem这个单位来设置和衡量，因为这个rem是相对于根元素的大小，大家都用rem