媒体查询相应不同电脑屏幕（pc端断点设置）

最新推荐文章于 2025-05-09 13:56:23 发布

原创最新推荐文章于 2025-05-09 13:56:23 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS媒体查询实现响应式的字体大小调整方案，根据不同屏幕尺寸设置不同的字体大小，以优化不同设备上的阅读体验。

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

 <style>
  @media screen and(min-width: 1024px){
    body{font-size: 18px}
    } /*>=1024的设备*/

    @media screen and(min-width: 1100px) {
    body{font-size: 20px}
    } 
    @media screen and(min-width: 1280px) {
    body{font-size: 22px;}
    } 

    @media screen and(min-width: 1366px) {

    body{font-size: 24px;}
    }  

    @media screen and(min-width: 1440px) {
    body{font-size: 26px }
    } 

    @media screen and(min-width: 1680px) {
    body{font-size: 28px;}
    } 
    @media screen and(min-width: 1920px) {
    body{font-size: 30px;}
    } 
    /* min-width:尺寸从小到大  max-width:尺寸大小从大到小 */
  </style>