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

移动端用rem使字体自适应

时间:2017-05-12 22:10:24      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:blog   pre   引入   16px   设置   字体大小   注意   自适应   css3   

 rem是css3引入的新的单位,与px和em相对比,我感觉rem更加便利,尤其是对移动端的字体自适应布局

 

 rem是根据HTML的字体大小进行设置的。

 而HTML的基本字体大小是16px,所以可以加入如下代码:

1 html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

  这样设置的意思是将HTML的font-size设置为10px,方便计算。

  然后就可以可以使用rem作为单位了,将px换成rem是绝对可行的,如:

1 #div1{font-size: 1.4rem;}

  因为rem是根据HTML字体大小(10px)来设置的,所以1.4rem即是14px。

  但是注意,这样直接设置固定大小在移动端并不适用……不信可以试试。

  但是使用百分比就可以,如:

1 #div1{font-size: 140%rem;}

  nuu,这样就可以自适应了。

移动端用rem使字体自适应

标签:blog   pre   引入   16px   设置   字体大小   注意   自适应   css3   

原文地址:http://www.cnblogs.com/wezhan/p/6847136.html

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