移动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计算所得 | – |