随着设备的丰富，网站已经不只是出现在电脑显示器上，而是出现在各种尺寸的设备上，比如智能手机、平板等。这导致网站需要让访问的人以各种不同的设备来访问，因此，响应式 Web 设计因此而生，响应式 Web 设计并不是技术，是用来描述 Web 设计的一种方式
响应式页面的主要方式是以下三点：
- 可随环境缩放的图像和媒体
- 灵活的，基于网格的布局，元素的尺寸都是相对单位
- 使用媒体查询根据媒体类型应用不同的样式
可伸缩的图像
在默认情况下，图像会按照原有的尺寸进行展示，除此之外，还可以通过width和height控制。当涉及到有限的设备尺寸时，按照原始的尺寸来显示图像就不合适了
且为了图片的等比例缩放，只应该设置一个属性，很明显设置max-width: 100%最为合适，这样图片会根据父元素的尺寸进行缩放。不使用width: 100%的原因是因为这个属性会让图像尽可能地填充父容器，导致了父容器宽度比图像宽时，图片会放大超过本来的尺寸，非常难看
弹性布局网格
一定定宽容器的网页非常死板，如果桌面宽度小于页面宽度就会出现横向滚动条，这对于响应式布局来说并不合适
如果页面能像图像一样缩放，正好适应浏览器宽度，这个问题就解决了，这就是流式布局
很显然，也需要百分比来实现，元素的百分比宽度基于父元素的可用宽度，它和可伸缩图像原理是一样的
指定宽度/容器宽度 = 百分数这种公式就适用于定宽布局，比如某个父元素的可用宽度为960px，而子元素需要600px的空间，计算一下得到0.625，将它换算为百分比作为width的值就可以实现宽度的自适应
::: tip 在使用公式计算前，应该注意元素所处于的上下文 :::
媒体查询
CSS3 新增了媒体查询对媒体类型进行了增强，虽然根据媒体类型可以应用不同的 CSS，但是对于不同的尺寸，媒体类型就无论为力了
这是在媒体类型上增强的语法：
@media logic type and (feature: value){
/* ... */
}
- logic：是可选的，其值为
only时，可以确定旧浏览器不会读取余下的媒体查询，同时忽略链接的样式，为not时会对媒体查询的结果进行取反，比如not screen表示媒体除了screen以外的类型应用样式 - type：媒体类型
- feature：也是可选的，一旦使用它们就必须用括号包裹，并在前面加上
and，feature 是预定的媒体特性，如min-width
这是一些媒体特性：
- width
- height
- device-width
- device-height
- color
通过媒体查询，可以根据设备的属性应用不同的属性
<div class="container">媒体查询</div>
.container {
color: red;
}
@media screen and (min-width: 480px){
.container {
color: blue;
}
}
在上述代码中会发生这样的事情，当width至少在480px以上像素时就应用媒体查询中的样式
视觉区域
对于 PC 端来说，视觉区域与浏览器中的窗口宽度保持一致，但对于移动端来说，就有点不一样了，浏览器中的视觉区域假如是 960px，但移动设备的宽度为 480px，而大多数移动厂商将视觉区域像素设置为 960px，这导致了移动设备为了显示整个网页不得不缩放，这对用户来说就像网页缩小了一样，不利于阅读，通常会放大浏览，为了解决这个问题，浏览器厂商引进了“viewport”的概念，让用户无需进行缩放
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
这段代码的重点是width=device-width，当设置了该语句后，浏览器计算像素时，会根据设备的宽度进行计算，而不是预设的视觉区域像素宽，另外，这段代码只对移动端有效
宏观布局
宏观布局描述了界面的更大、网页级组织方式，在应用任何布局之前，应确保内容的流动合理，较小的屏幕将显示这种单列的默认排序方式
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
排列这些单独的网页级组件时，实际上就是在设计一个宏布局：网页的概要视图，使用媒体查询，可以在 CSS 中提供规则，用于描述应如何根据不同的屏幕尺寸调整此视图
微观布局
页面中的较小组件也可以有自己的独立布局，理想情况下，无论这些组件级布局在页面上的位置如何，它们都会自动调整