css3响应式布局

最新推荐文章于 2025-07-16 09:37:12 发布

原创最新推荐文章于 2025-07-16 09:37:12 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

响应式布局专栏收录该内容

1 篇文章

订阅专栏

本文介绍了CSS3响应式布局的核心——媒体查询，包括不同屏幕尺寸的分界点及其语法，强调了min-width和max-width的使用场景。同时，详细讲解了rem单位，指出其作为响应式开发的利器，通过调整根元素的字体大小来影响整个页面布局。

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

媒体查询

1、分界点
超小屏幕xs （移动设备）768px以下
小屏设备sm 768px-992px
中等屏幕md 992px-1200px
宽屏设备lg 1200px以上

2、语法：@media screen and （max-width：768px）

  <style>
    body {
      background-color: green;
    }

    @media screen and (min-width: 768px) {
      body {
        background-color: indianred;
      }
    }

    @media screen and (min-width: 990px) {
      body {
        background-color: skyblue;
      }
    }

    @media screen and (min-width: 1200px) {
      body {
        background-color: tomato;
      }
    }
  </style>

若当前页面宽度大于min-width，则样式生效，所以媒体查询min-width应从小写到大;
若当前页面宽度小于max-width，则样式生效，所以媒体查询max-width应从大写到小。
min/max-width指的是页面宽度;min/max-device-width指的是设备屏幕宽度

 <!-- 通过媒体查询调用不同样式 -->
  <link rel="stylesheet" href="css/a.css">
  <link rel="stylesheet" media="screen and (max-width:900px)" href="css/b.css">

媒体类型：screen(屏幕) print（打印机）Handheld(手持设备)All(通用）
常用媒体查询参数：

Width|height----视口宽高
Device-width|device-height设备宽高
Orientation：检查设备处于横向
Landscape 横向 portrait 竖屏

rem

1.根元素html的字体大小font-size代表1rem;
2.其他元素的属性若是rem为单位，则相当于html字体大小的多少倍。
3.响应式开发时，可以通过改变根元素的字体大小，从而改变其他元素属性的值。