关于font-size适应多设备的总结

声明：以下学习笔记是根据流云诸葛总结。

适配规则：

适配规则要配合rem使用。

1.确认设计稿的横向分辨率。如640。

2.以100px为参照。width = 640/100 = 6.4rem。

3.font-size = clientWidth / 6.4 。

这儿我们用js来实现：

当页面加载完后，使用如下代码：

var deviceWidth = document.documentElement.clientWidth;

if(deviceWidth > 640){

     deviceWidth = 640;

}
else{
    document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
}

4.接下来的CSS单位就可以使用换算过来的rem了。如设计稿height：20px；我们就可以写作height：.2rem。

5.要想这样做，我们别忘了在头部加上如下代码

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

6.font-size可能需要额外的媒介查询，并且不能使用rem。

@media screen and (max-width:321px){
    .m-navlist{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .m-navlist{font-size:16px}
}

@media screen and (min-width:400px){
    .m-navlist{font-size:18px}
}