css + 媒体查询 + rem 自适应方案

最新推荐文章于 2024-09-29 21:43:16 发布

475 .

最新推荐文章于 2024-09-29 21:43:16 发布

阅读量393

点赞数 10

分类专栏： css 文章标签： css 媒体前端

本文链接：https://blog.csdn.net/qq_44862552/article/details/134991894

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章详细介绍了如何使用CSS媒体查询结合REM单位，根据不同屏幕尺寸调整HTML字体大小，以及针对移动设备和桌面设备的隐藏策略，实现网页的响应式设计。

摘要由CSDN通过智能技术生成

css + 媒体查询 + rem 自适应方案

@media (min-width: 1024px) {
  html {
    font-size: 18px !important;
  }
}
@media (min-width: 1100px) {
  html {
    font-size: 20px !important;
  }
}
@media (min-width: 1280px) {
  html {
    font-size: 22px !important;
  }
}
@media (min-width: 1366px) {
  html {
    font-size: 24px !important;
  }
}
@media (min-width: 1440px) {
  html {
    font-size: 25px !important;
  }
}
@media (min-width: 1680px) {
  html {
    font-size: 28px !important;
  }
}
@media (min-width: 1920px) {
  html {
    font-size: 33px !important;
  }
}

@media all and (max-width: 750px) {
  .window {
    display: none !important;
  }
}

@media all and (min-width: 1024px) {
  .mobile {
    display: none !important;
  }
}