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

来源：互联网发布：有深度的动漫知乎编辑：程序博客网时间：2024/05/16 08:13

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

适配规则：

输入图片说明

适配规则要配合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}}

0 0