h5 rem字体

最新推荐文章于 2024-10-29 11:48:03 发布

重案组之虎曹达华

最新推荐文章于 2024-10-29 11:48:03 发布

阅读量213

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/wtw945/article/details/81258511

css 专栏收录该内容

5 篇文章

订阅专栏

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

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

@media only screen and (max-width: 1920px), only screen and (max-device-width: 1920px) {
    html,
    body {
      font-size: 512px;
    }
  }
@media only screen and (max-width: 1440px), only screen and (max-device-width: 1440px) {
    html,
    body {
      font-size: 384px;
    }
  }
@media only screen and (max-width: 1366px), only screen and (max-device-width: 1366px) {
    html,
    body {
      font-size: 364.267px;
    }
  }
@media only screen and (max-width: 1080px), only screen and (max-device-width: 1080px) {
    html,
    body {
      font-size: 288px;
    }
  }
  @media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px) {
    html,
    body {
      font-size: 273.067px;
    }
  }
  @media only screen and (max-width: 960px), only screen and (max-device-width: 960px) {
    html,
    body {
      font-size: 256px;
    }
  }
  @media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
    html,
    body {
      font-size: 213.333px;
    }
  }
  @media only screen and (max-width: 750px), only screen and (max-device-width: 750px) {
    html,
    body {
      font-size: 200px;
    }
  }
  @media only screen and (max-width: 720px), only screen and (max-device-width: 720px) {
    html,
    body {
      font-size: 192px;
    }
  }
  @media only screen and (max-width: 640px), only screen and (max-device-width: 640px) {
    html,
    body {
      font-size: 170.667px;
    }
  }
  @media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
    html,
    body {
      font-size: 160px;
    }
  }
@media only screen and (max-width: 540px), only screen and (max-device-width: 540px) {
    html,
    body {
      font-size: 144px;
    }
  }
  @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    html,
    body {
      font-size: 128px;
    }
  }
  @media only screen and (max-width: 414px), only screen and (max-device-width: 414px) {
    html,
    body {
      font-size: 110.4px;
    }
  }
  @media only screen and (max-width: 400px), only screen and (max-device-width: 400px) {
    html,
    body {
      font-size: 106.6667px;
    }
  }
  @media only screen and (max-width: 375px), only screen and (max-device-width: 375px) {
    html,
    body {
      font-size: 100px;
    }
  }
  @media only screen and (max-width: 360px), only screen and (max-device-width: 360px) {
    html,
    body {
      font-size: 96px;
    }
  }
  @media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
    html,
    body {
      font-size: 85.3333px;
    }
  }

  body {
      font-size: 16px!important;
  }