移动Web开发之rem

rem(一个CSS单位)

定义：font size of the root element.

这个单位的定义和em类似，不同的是em是相对于父元素，而rem是相对于根元素。rem定义是根元素的font-size, 以rem为单位，其数值与px的关系，需相对于根元素的font-size计算，比如，设置根元素font-size=16px, 则表示1rem=16px。关于rem更多的解读，建议可以腾讯一团队的文章《web app变革之rem》。 根据这个特点，可以根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不同终端上以相对一致的视觉效果呈现。 选取一个设备宽度作为基准，设置其根元素大小，其他设备根据此比例计算其根元素大小。比如使得iPhone6根元素font-size=16px。

设 备	设备宽度	根元素font-size/px	宽度/rem
iPhone5	320	js计算所得	–
iPhone6	375	16	23.4375
i6 Plus	414	js计算所得	–
-	360	js计算所得	–