移动端字体设置rem。和兼容。

移动端字体单位font-size选择px还是rem？

一：做少部分手机适配可以用px。

二：当要适配各种手机端设备时用rem。

*二：

1.使用rem来设置Web页面的字体大小；

2.rem是相对于根元素<html>；

3.rem能等比例适配所有屏幕

4.在根元素<html>中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有

设置，将是以“16px”为基准）；

引入css代码如下：

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

@media screen and (min-width:800px){html{font-size:25px}}

***1rem=100px；

二：兼容移动设备；

插入js文件 autoFontsize.min.js

(function(d,c){var e=d.documentElement,b="orientationchange" in window?"orientationchange":"resize",a=function(){var f=e.clientWidth;if(!f){return}if(f>640){f=640}e.style.fontSize=100*(f/640)+"px"};if(!d.addEventListener){return}c.addEventListener(b,a,false);d.addEventListener("DOMContentLoaded",a,false)})(document,window);

来源：CSDN

作者：lemonly007

链接：https://blog.csdn.net/lemonly007/article/details/80476446

标签

rem

html代码

font-size

数码