# 响应式布局

随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（responsive web design，RWD），RWD 指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。

响应式 Web 设计不是单独的技术，它是描述 Web 设计的一种方式、或者是一组最佳实践的一个词，它是用来建立可以响应查看内容的设备的样式的一个词。

# 1、媒体查询

响应式设计仅仅是因为媒体查询才新兴起来的。媒体查询第三级规范已经在 2009 年成为了候选推荐，这意味着它可视为准备好在浏览器中开始支持了。媒体查询允许我们运行一系列测试，例如用户的屏幕是否大于某个宽度或者某个分辨率，并将 CSS 选择性地适应用户的需要应用在样式化页面上。

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}

1
2
3
4
5

使用灵活网格，你只需要加进去一个断点，在内容看起来不齐整的时候改变设计。例如如果一行随着屏幕大小增加而增长得不可读的长，或者是一个盒子在变窄时把每行的两个单词挤到一起。

现代布局方式，例如多栏布局、伸缩盒和网格默认是响应式的。

.col {
  float: left;
  width: 25%;
}

1
2
3
4

.container {
  column-count: 3;
}

1
2
3

使用了 flex: 1 的简写，可伸缩物件每个将会占据一份可伸缩容器中相等大小的空间。

.container {
  display: flex;
}

.item {
  flex: 1;
}

1
2
3
4
5
6
7

下面的示例创建了一个有着 3 个大小为 1fr 的轨道的网格容器。这会创建三个列轨道，每个占据了容器中可用空间的一部分。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

1
2
3
4

响应垂直居中：

.div {
  width: 50vw;
  height: 50vh;
  margin: 25vh auto;
}

1
2
3
4
5

<meta name="viewport" content="width=device-width,initial-scale=1">

这个元标签告诉移动端浏览器，它们应该将视口宽度设定为设备的宽度，将文档放大到其预期大小的100%，在移动端以你所希望的为移动优化的大小展示文档。

和视口元标签一起，你可以使用另外几个设定：