rem
布局的开源方案hotcss
, 其原理个人理解如下:
手机px = (手机页面宽度/设计稿宽度) * 设计稿px
手机rem = 手机px / fontSize
= (手机页面宽度/设计稿宽度) * 设计稿px / fontSize
= (设备屏幕宽度/设计稿宽度) * 设计稿px / fontSize
hotcss
对fontSize
的设定
root fontSize = (设备屏幕宽度/320) * 20 = 设备屏幕宽度/16
, 将页面16等分,1rem = 1/16 设备宽度
于是
手机rem = (设备屏幕宽度/设计稿宽度) * 设计稿px / ((设备屏幕宽度/320) * 20)
= 设计稿px * 320 /设计稿宽度/20 = 设计稿px / (设计稿宽度/16)
手机rem
可以理解为一个比率,就是设计稿px
占设计稿宽度1/16
的比率,此比率应该与手机px
占手机屏幕宽度1/16
的比率相等,即是手机的rem
hotcss
对viewport
的设定
scale = 1/dpr
viewport = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no'
于是
手机px
变为 手机px/dpr
得到真实的1px
其中320
和20
,作者的解释如下, 本人无法理解
16rem
。相当于设计稿的100%
。320
是认为页面是320
像素。20
是每份的的宽度。因为10px
在某些浏览器无法显示(最小12px
)所以选择了每份20
。- 据此可推断,16份即为
320px
。也即我们认为的页面宽度。