移动端用rem使字体自适应

Posted 2020-09-18

　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，这样就可以自适应了。