@media 移动端和PC端的适配大小

最新推荐文章于 2025-05-23 11:12:45 发布

一只沙雕

最新推荐文章于 2025-05-23 11:12:45 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_41212530/article/details/89376558

本文详细介绍了响应式网页设计中，如何根据不同屏幕尺寸调整字体大小，以提供最佳阅读体验的方法。通过使用CSS的@media查询，实现了从手机到桌面全范围设备上的字体自适应调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@media (min-width: 376px){
    html{
        font-size: 8px;
    }
}
@media (min-width: 415px){
    html{
        font-size: 8px;
    }
}
@media (min-width: 640px){
    html{
        font-size: 12px;
    }
}
@media (min-width: 720px){
    html{
        font-size: 14px;
    }
}
@media (min-width: 750px){
    html{
        font-size: 15px;
    }
}
@media (min-width: 800px){
    html{
        font-size: 15px;
    }
}
@media (min-width: 1024px){
    html{
        font-size: 18px;
        font-family: arial;
    }
}
@media (min-width: 1100px){
    html{
        font-size: 20px;
        font-family: arial;
    }
}
@media (min-width: 1280px){
    html{
        font-size: 22px;
        font-family: arial;
    }
}
@media (min-width: 1366px){
    html{
        font-size: 24px;
        font-family: arial;
    }
}
@media (min-width: 1440px){
    html{
        font-size: 25px;
        font-family: arial;
    }
}

@media (min-width: 1680px){

    html{
        font-size: 28px;
        font-family: arial;
    }
}
@media (min-width: 1920px){
    html{
        font-size: 33px;
        font-family: arial;
    }
}