响应式设计入门

当你在移动设备上访问一个网站时，你可能会看到一个桌面版的网站挤在一个更小的屏幕上，这迫使你缩放和平移来查看任何内容。你可能还会碰到一个弱化了的移动版本，缺少桌面版所具备的内容和体验。不过，希望你看到的是一个响应式网站——一种根据浏览器宽度重新调整内容的设计。

我们将在这里讨论响应式设计的三个不同方面:

1. 回流的内容
2. 固定的大小
3. 相对大小
4. 断点(媒体查询)

回流的内容

回流内容是指根据浏览器的视口宽度调整其宽度的内容。例如，当浏览器宽度变小时，默认设置的段落会自动换行。可以通过拖动Designer画布的边缘来模拟此行为。

固定的大小

使用固定像素宽度时要注意这一点。例如，如果你给一个图像500px的宽度，它可能看起来很棒的台式机或平板电脑。然而，当在较小的移动设备上查看图像时，图像宽度将停留在500px，不适应较小的视口(通常小于500px)。

相对大小

这是指设置一个元素的大小相对于其他东西，如浏览器宽度或父元素。例如，与其使用基于像素的图像大小，不如考虑使用不同的单位，如%、VW(视口宽度)或VH(视口高度)。如果你在图像上使用%并调整浏览器宽度，你可以看到它会相应地调整，而基于px的图像则不会。

了解更多关于应用不同的单元来控制元素的宽度和高度。

断点

布局通常比管理一个图像的宽度要复杂得多。使用断点(也称为媒体查询)不仅可以测试回流内容，还可以根据不同的设备宽度范围修改设计和布局。

得到一个断点介绍并了解跨多个断点进行样式化。