注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

叶落非殇

charset="UTF-8"

 
 
 

日志

 
 

移动端前端开发em与rem如何取值  

2015-05-24 18:23:18|  分类: 前端开发基础 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
最近在学习移动端网页制作,其中遇到最大的问题莫过于取值问题,因为移动端尤其是安卓机屏幕大小千奇百怪并没有一个统一的大小,为了能正常在各种屏幕尺寸的手机下运行,用px单位就不行了,为了方便自适应则需要使用em和rem做单位。
但是em与rem取值存在一个最大的弊端,那就是计算,为了节省计算时间,看到网上有两种写法
方法一:在body中声明font-size:62.5%
这里的思想是利用系统默认字体大小16px,将1em定义成10px,后面取值只需要相应的对px绝对单位进行除以 10的操作即可。
方法二:在html中声明font-size:10px;这样直接使用rem,1rem=10px。
思想上操作是大同小异,具体操作方法实际不止这两种。
当你信心满满按照上面的方法操作时,才会发现,上面的方法简直就是可笑!这些方法都是想将1em或者说是1rem转换成10px,但却没有注意到,并不是所有浏览器都10px,比如谷歌浏览器,最小识别12px,那么无论你怎么去转换这个10px,它只会告诉你 1em=12px,1rem=12px。一切变得跟你想象的不一样了!
既然10px识别不了,那么100px总能识别吧,所以font-size:625%是个不错的选择。
关于精确度,em rem做单位,其实精确度并不高,而且缩放的时候并不是非常理想,所以移动端具有vh和vw单位,但目前还存在一些兼容性的问题,相信以后vw,vh单位会渐渐占主导地位!
  评论这张
 
阅读(7)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017