前言#

响应式布局是2010年5月由Ethan Marcotte提出的一个概念，本质就是一个网站兼容多端，对不同尺寸的屏幕做出响应，并进行相应布局;既然是概念，那解决的方案是什么，答案就是媒体查询

媒体查询#

媒体查询（Media Queries）是 CSS 实现响应式布局的重要技术，可以根据媒体类型、视口宽度、设备方向等条件，为页面应用不同的 CSS 样式。

基础语法#

使用 @media 定义媒体查询。

1
@media 媒体类型 and (媒体特性) {
2
  /* 满足条件时生效的 CSS 样式 */
3
}
4

5
/* 屏幕视口宽度 >= 768px 时生效 */
6
@media screen and (min-width: 768px) {
7
  .box {
8
    width: 50%;
9
  }
10
}

媒体类型

媒体类型（Media Type）用于指定 CSS 样式应用于哪一类设备或输出媒介。

媒体类型	说明
`all`	所有设备，默认值
`screen`	屏幕设备，包括手机、平板、电脑等
`print`	打印设备及打印预览

使用示例：

1
/* 所有设备 */
2
@media all {
3
  .box {
4
    color: red;
5
  }
6
}
7

8
/* 屏幕设备 */
9
@media screen {
10
  .box {
11
    color: blue;
12
  }
13
}
14

15
/* 打印模式 */
16
@media print {
17
  .box {
18
    color: black;
19
  }
20
}

媒体类型可以省略，默认使用 all。

1
/* 以下两种写法等价 */
2
@media all and (min-width: 768px) {}
3

4
@media (min-width: 768px) {}

注意：screen 并不专门代表电脑端，而是包含手机、平板和电脑等屏幕设备。

媒体特性：媒体特性（Media Feature）用于检测视口、设备或用户环境的具体特征。

媒体特性	说明
`min-width`	视口宽度大于等于指定值
`max-width`	视口宽度小于等于指定值
`min-height`	视口高度大于等于指定值
`max-height`	视口高度小于等于指定值
`orientation: portrait`	视口为纵向
`orientation: landscape`	视口为横向
`prefers-color-scheme: dark`	用户偏好深色主题
`prefers-reduced-motion: reduce`	用户偏好减少动画

使用示例：

1
/* 视口宽度 >= 768px */
2
@media (min-width: 768px) {
3
  .box {
4
    width: 50%;
5
  }
6
}
7

8
/* 视口宽度 <= 767px */
9
@media (max-width: 767px) {
10
  .box {
11
    width: 100%;
12
  }
13
}
14

15
/* 横向视口 */
16
@media (orientation: landscape) {
17
  .box {
18
    background-color: blue;
19
  }
20
}

现代 CSS 还支持范围比较语法：

1
/* 视口宽度在 768px ~ 1199px 之间 */
2
@media (768px <= width < 1200px) {
3
  .box {
4
    width: 80%;
5
  }
6
}

媒体查询中的逻辑：媒体查询支持通过逻辑运算符组合多个条件。

逻辑	说明
`and`	逻辑与，所有条件满足时生效
`not`	逻辑非，对查询条件取反
`or`	逻辑或，任意条件满足时生效
`,`	逗号分隔多个查询，效果类似逻辑或
`only`	主要用于旧浏览器兼容，现代开发通常不需要

使用示例：

1
/* 屏幕设备，并且视口宽度 >= 768px */
2
@media screen and (min-width: 768px) {
3
  .box {
4
    width: 50%;
5
  }
6
}
7

8
/* 768px <= 视口宽度 <= 1200px */
9
@media (min-width: 768px) and (max-width: 1200px) {
10
  .box {
11
    width: 80%;
12
  }
13
}
14

15
/* 非打印模式 */
16
@media not print {
17
  .box {
18
    display: block;
19
  }
20
}
21

22
/* 不满足视口宽度 >= 768px 的情况 */
23
@media not all and (min-width: 768px) {
24
  .box {
25
    width: 100%;
26
  }
27
}
28

29
/* 与上面的 or 示例效果相同 */
30
@media (max-width: 767px), (orientation: landscape) {
31
  .box {
32
    background-color: red;
33
  }
34
}

断点和书写位置#

**响应式断点：**断点（Breakpoint）是指页面布局需要发生变化时，对应的视口宽度。

常见的参考断点：

视口宽度	参考设备类型
`< 768px`	手机等窄屏设备
`768px ~ 1023px`	平板等中等宽度设备
`1024px ~ 1199px`	小型桌面屏幕
`>= 1200px`	大型桌面屏幕

这些不是 CSS 强制规定的断点，而是开发中常见的参考值。实际项目应该根据页面布局需求选择断点。

媒体查询的书写位置：媒体查询既可以写在 <style> 标签中，也可以写在外部 CSS 文件中。还有一种不推荐的写法，就是link的时候使用媒体查询，但是如果按照上面的断点，至少要写4份样式，然后媒体查询加载不同样式，需要注意的是，这不是按需加载，网页加载的时候会一起加载

媒体查询的策略#

媒体查询的策略主要分为3种：无策略，移动端优先、PC优先，最终实现的效果是一样，无策略可能需要写逻辑判断，想到哪写到哪，移动端优先是从小的尺寸写到大，pc则是大写到小，一般情况下推荐使用移动端优先，下面通过一个示例演示：

1
  <div class="row">
2
    <div class="col">
3
      <img src="./images/1.png" alt="">
4
    </div>
5
    <div class="col">
6
      <img src="./images/1.png" alt="">
7
    </div>
8
    <div class="col">
9
      <img src="./images/1.png" alt="">
10
    </div>
11
    <div class="col">
12
      <img src="./images/1.png" alt="">
13
    </div>
14
    <div class="col">
15
      <img src="./images/1.png" alt="">
16
    </div>
17
    <div class="col">
18
      <img src="./images/1.png" alt="">
19
    </div>
20
    <div class="col">
21
      <img src="./images/1.png" alt="">
22
    </div>
23
    <div class="col">
24
      <img src="./images/1.png" alt="">
25
    </div>
26
    <div class="col">
27
      <img src="./images/1.png" alt="">
28
    </div>
29
    <div class="col">
30
      <img src="./images/1.png" alt="">
31
    </div>
32
    <div class="col">
33
      <img src="./images/1.png" alt="">
34
    </div>
35
    <div class="col">
36
      <img src="./images/1.png" alt="">
37
    </div>
38
  </div>

1
/* 无策略 */
2
@media(max-width: 576px) {
3
    .col {
4
        width: 100%;
5
    }
6
}
7

8
@media(min-width: 576px)and (max-width: 768px) {
9
    .col {
10
        width: 50%;
11
    }
12
}
13

14
@media(min-width: 768px)and (max-width: 992px) {
15
    .col {
16
        width: 25%;
17
    }
18
}
19

20
@media(min-width: 992px)and (max-width: 1200px) {
21
    .col {
22
        width: 16.66667%;
23
    }
24
}
25

26
@media(min-width: 1200px) {
27
    .col {
28
        width: 8.3333%;
29
    }
30
}

1
 /* 移动端优先 */
2
    .col {
3
      width: 100%;
4
    }
5

6
    @media(min-width: 576px) {
7
      .col {
8
        width: 50%;
9
      }
10
    }
11

12
    @media(min-width: 768px) {
13
      .col {
14
        width: 25%;
15
      }
16
    }
17

18
    @media(min-width: 992px) {
19
      .col {
20
        width: 16.66667%;
21
      }
22
    }
23

24
    @media(min-width: 1200px) {
25
      .col {
26
        width: 8.3333%;
27
      }
28
    }

1
/* pc端优先 */
2
.col {
3
    width: 8.3333%;
4
}
5

6
@media(max-width: 1200px) {
7
    .col {
8
        width: 16.66667%;
9
    }
10
}
11

12
@media(max-width:992px) {
13
    .col {
14
        width: 25%;
15
    }
16
}
17

18
@media(max-width:768px) {
19
    .col {
20
        width: 50%;
21
    }
22
}
23

24
@media(max-width:576px) {
25
    .col {
26
        width: 100%;
27
    }
28
}

实战#

使用媒体查询的方式实现rem布局，去掉之前的js代码，改为媒体查询监听改变html上font-size的字体大小：

github代码仓库：https://github.com/youzi177/css-layout-lab

音乐

音乐

前言#

媒体查询#

基础语法#

断点和书写位置#

媒体查询的策略#

实战#

文章分享

评论区