码迷,mamicode.com
首页 > 移动开发 > 详细

移动端布局方法rem

时间:2017-07-24 13:22:27      阅读:325      评论:0      收藏:0      [点我收藏+]

标签:body   margin   apt   init   orm   settime   creat   tps   padding   

 

 

 

REM

REM这个单位,会根据html的font-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

标签:body   margin   apt   init   orm   settime   creat   tps   padding   

原文地址:http://www.cnblogs.com/wshijie/p/7228162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!