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

rem与px之间的换算(移动端)

时间:2017-05-05 00:47:06      阅读:997      评论:0      收藏:0      [点我收藏+]

标签:高度   开始   了解   元素   缩放   12px   font   手机   模糊   

    最近因为工作接触到rem与px之间的换算,之前知道一些,不过还是比较笼统模糊,用起来不是很明白,后来自己查了点资料,以及亲自测试总算明白它们之间是怎么换算的了。

    rem是一个相对值,它相对于根元素html,所以我们在使用的时候需要设置html的font-size值,内容大小就相对该值进行设置大小,比如,html的font-size为100px,内容的font-size想设置为20px,这换算为rem单位就是20/100=0.2rem。不过在开发中,html的font-size值会动态变化的,这样才可以自适应各种手机端,但我们可以把100px设置为最大值。html的font-size不只限于px单位,有的还使用了%,我在开发中就遇到这个,一开始我还不是了解,后来我查了一下才知道百分之几会有对应的像素值,比如62.5%对应的像素值是10px,75%对应的像素值是12px,这个是怎么算出来的呢?我们都知道,浏览器的默认字体大小是16px,那么16px对应的百分比就是100%,其他像素的百分比就是除以16得到的。

   在没有设置html的font-size值时,rem就相对浏览器的font-size值,即16px。

   使用rem有什么好处呢?rem既然是一个相对值,那么我们就可以改变html的font-size值来动态改变页面内容的字体大小,宽高度,间距等等,这样就有了一个自由缩放的效果,在移动端就可以适配不同手机屏幕,所以在移动端就使用rem作为单位。

 

rem与px之间的换算(移动端)

标签:高度   开始   了解   元素   缩放   12px   font   手机   模糊   

原文地址:http://www.cnblogs.com/yezi-dream/p/6810449.html

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