移动端布局方法rem

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端布局方法rem相关的知识,希望对你有一定的参考价值。

 

 

 

REM

REM这个单位,会根据htmlfont-size大小进行转换。

.5rem = 50px / 100

转换后p的padding-top就是50px了。只要我们进行适当的计算,当前屏幕的宽度,html的font-size是多少px就OK了。

如何计算当前html的font-size值

比如,我们拿到的设计稿是750px,那就设置成当屏幕宽度是750的时候,html的font-size就是100px(当然这个100px你可以随意设置的,我设置成100px只是方便我计算),然后就根据当前屏幕的宽度 / 750 * 100,就得到了当前屏幕宽度的font-size值。

上面这段代码,是直接根据屏幕宽度进行计算font-size的。而淘宝移动端REM方案,还根据你的dpr去计算,而且会进行整体的缩放。淘宝的这种方案,比上面的代码会好很多。

第一种方案

第二种方案

大家注意边框的大小。第二张图的边框是比第一张图的小的,两个都是border:solid 1px。其他的边距都是一样。淘宝的方案,解决了另一个问题:边框1px的问题。

大家可以打开以下链接,看看具体的效果:

淘宝移动端REM

这个很简单,只需要加载js就好了

然后在css中,将px转为rem就好了。如果用scss的,写个函数就好了。

比如p的font-size在750的设计稿是40px,然后s(40)就OK了。

原文地址:http://web.jobbole.com/91853/

以上是关于移动端布局方法rem的主要内容,如果未能解决你的问题,请参考以下文章

移动端页面自适应解决方案:rem 布局篇

移动端rem+dpr布局

前端移动端页面怎么用rem布局

一看就懂得移动端rem布局rem如何换算

移动端适配(手机端rem布局详解)

移动端布局,字体使用rem不生效问题