屏幕适配之c3媒体查询代码块(20/1为1rem)

最新推荐文章于 2024-06-21 16:13:00 发布

原创最新推荐文章于 2024-06-21 16:13:00 发布 · 899 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种响应式网页设计中根据不同屏幕宽度调整字体大小的方法。通过使用CSS媒体查询，针对不同设备屏幕尺寸设置了相应的字体大小，确保了良好的阅读体验。

@media only screen and (width: 320px) {
    html {
        font-size: 16px;
    }
}
@media only screen and (width: 360px) {
    html {
        font-size: 18px;
    }
}
@media only screen and (width: 375px) {
    html {
        font-size: 18.75px;
    }
}
@media only screen and (width: 400px) {
    html {
        font-size: 20px;
    }
}
@media only screen and (width: 411px) {
    html {
        font-size: 20.55px;
    }
}
@media only screen and (width: 414px) {
    html {
        font-size: 20.7px;
    }
}
@media only screen and (min-width: 640px) {
    html {
        font-size: 32px;
    }
}