# CSS3教程 - 18 响应式布局

下面来介绍响应式布局。

# 18.1 响应式布局简介

什么是响应式布局？

响应式布局就是网页能够根据不同的屏幕尺寸自动调整显示的布局，从而提供更好的用户体验。

举个栗子：

以比较宽的浏览器视口来访问小米官方，显示如下：

如果逐渐缩小浏览器窗口，最终页面的布局会发送变化，因为小米的官网就实现了响应式布局：

那么如何实现响应式布局呢？

响应式布局的关键就是媒体查询 ，通过媒体查询知道不同的状态，例如针对不同的设备、不同的屏幕尺寸、分辨率等提供不同的布局样式，确保不同尺寸下都有良好的显示效果。

这个和移动端是不同的，小米官网针对移动端单独开发了网页，用手机访问的小米官网和PC端访问的不是一个网页，这里的响应式布局是一个页面针对不同的设备或窗口大小，显示不同的效果。

但是一般布局比较复杂的网页，可能不做响应式布局，因为实现可能比较复杂。

# 18.2 媒体查询

下面来介绍媒体查询的使用。

# 1 媒体类型

媒体类型查询是查询设备的类型，针对不同的设备可以设置指定的样式。

语法

@media 设备类型 {
  
}

1
2
3

设备类型的可选值：

all ：所有设备；
print ：打印设备；
screen ：带屏幕的设备；
speech ：屏幕阅读器；

如果针对多种设备设置样式，可以使用 , 连接多个媒体类型。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media screen {
      .box1 {
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }
    }
  </style>
</head>
<body>
  <div class="box1"></div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

上面设置的样式，只有在有屏幕的设备上才会生效。
如果上面写成 @media print {} ，通过浏览器发现，看不到设置的样式效果了。

另外可以在媒体类型前添加一个only，例如 @media only screen {} 表示只有，添不添加 only 效果是一样的，only 的作用主要是为了兼容一些老版本浏览器，老版本浏览器不支持媒体查询，不认识 only，一遇到 only，老版本浏览器直接忽略，避免解析错误。

一般不限制设备，直接不写设备类型就可以了，@media { ... } 默认等价于 @media all { ... }，即对所有设备生效。

# 2 媒体特性

媒体特征是媒体查询中的条件部分，常见的媒体特征包括：

width ：视口的宽度，只有视口宽度是该值的时候生效；
height ：视口的高度，，只有视口高度是该值的时候生效；
min-width ：视口的最小宽度，视口大于指定宽度时生效；
max-width ：视口的最大宽度，视口小于指定宽度时生效；

width 和 height 一般不用，主要使用 min-width 和 max-width 。

举个栗子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @media (max-width:600px) {  /* 宽度小于600生效*/
      .box1 {
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    }

    @media (min-width:600px) {  /* 宽度大于600生效*/
      .box1 {
        width: 100px;
        height: 100px;
        background-color: lightblue;
      }
    }

    @media (min-width:800px) {  /* 宽度大于800生效*/
      .box1 {
        width: 100px;
        height: 100px;
        background-color: lightpink;
      }
    }
  </style>
</head>
<body>
  <div class="box1">foooor.com</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

上面设置了 box1 在视口宽度小于 600px 的时候，背景为绿色；视口宽度大于600px，背景为蓝色；视口宽度大于1000px，背景为粉色。
需要注意，@media (min-width:800px) 需要写在 @media (min-width:600px) 后面，因为宽度大于 800 肯定也满足大于 600，如果大于 600 的条件写在后面，会覆盖前面的大于800。

显示如下：

下面在介绍几种写法：

/* 宽度大于600或者宽度小于800时生效 */
@media (min-width:600px),(max-width:800px) {  
}

/* 宽度大于600并且宽度小于800时生效 */
@media (min-width:600px) and (max-width:800px) {  
}

/* 只有在带屏幕的设备，宽度大于600并且宽度小于800时生效 */
@media only screen and (min-width:600px) and (max-width:800px) {
}

1
2
3
4
5
6
7
8
9
10
11

一般不限制设备，就不限制媒体类型了，只限制视口宽度即可。

媒体特征还有屏幕方向、分辨率等，可以根据需要查询如何使用，这里就不介绍了。

# 3 断点

在上面设置的样式切换的分界点，我们称其为断点，也就是网页的样式会在这个分界点时发生变化。

一般比较常用的断电如下：

尺寸	屏幕类型	媒体特性
小于768px	超小屏幕	`max-width=768px`
大于768px	小屏幕	`min-width=768px`
大于992px	中型屏幕	`min-width=992px`
大于1260px	大屏幕	`min-width=1200px`

当然这个只是一个参考，具体按自己的需要设置切换的分界点。

← 17-视口 19-补充 →