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

最新推荐文章于 2024-06-20 09:09:51 发布

原创最新推荐文章于 2024-06-20 09:09:51 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

移动端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种基于REM单位的响应式布局适配方案，包括确定设计稿基准宽度、使用JS动态设置根字体大小及CSS媒介查询等步骤。

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

适配规则：

输入图片说明

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