1 2 3 4 5 6 7 |
|
javascript 代码
首先,我们将屏幕的 1/15 大小(px)复制给 html 标签的 font-size 属性。此时,在任何尺寸的屏幕上,屏幕尺寸(px)的 1/15 px 都等于 1rem 的大小。即:在任何尺寸的屏幕上,只要给元素设置值相同的 rem,则在所有尺寸的屏幕上该元素所占屏幕宽度的比例是一样的,所占比例一样,就适配了所有尺寸的屏幕。
less 代码
现在只需要将设计稿中元素的 px 单位转换为 rem 单位。
所以,这个时候,我们可以把设计稿也当成一个具有一定尺寸的手机屏幕。
在我这个例子中,设计稿的宽度为 750px。
所以,750/15 = 50px,即在设计稿这样尺寸的手机屏幕中,1rem = 50px。
然后,在 less 代码中,我们定义一个变量 @r。
量得 p 的宽度为 100px,因为在设计稿这样尺寸的屏幕中,1rem = 50px,所以该 p 的 rem 的值为:100/50 rem,即 100/@r。
量得 p 的高度为 200px,因为在设计稿这样尺寸的屏幕中,1rem = 50px,所以该 p 的 rem 的值为:200/50 rem,即 200/@r。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
关于HTML中rel属性的分析
html页面中meta的作用以及页面的缓存与不缓存设置的解析
以上就是关于移动 web 端屏幕适配(rem)的介绍的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《移动端》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者