首页 > 代码库 > 移动端用rem使字体自适应

移动端用rem使字体自适应

 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使字体自适应