前端适配之细说rem(网易的移动端页面布局做法)
rem指的是根元素的字体大小,多数根元素大小为16px,但设备的dpi会影响根元素的大小,因此并不是固定的。 所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写。 使用rem布局结合在html 上根据不同分辨率设置不同font-size有很多不好解决的麻烦,那应该如何解决呢?我们可以通过JS来计算不同分辨率下,font-size的大小,这是在我研究了网易的移动端布局之后得出的结论。 下图是网易在分辨率为320*680,375*680,414*680,500*680时,html的font-size尺寸 它是根据什么计算的,这就跟设计稿有关了,拿网易来说,它的设计稿应该是基于iphone4或者iphone5来的,所以它的设计稿竖直放时的横向分辨率为640px,为了计算方便,取一个100px的font-size为参照,那么body元素的宽度就可以设置为width: 6.4rem,于是html的font-size=deviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。根据这个计算规则,可得出本部分开始的四张截图中html的font-size大小如下: deviceWidth = 320,font-size = 320 / 6.4 =