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