响应式设计入门 - Webflow 帮助
Last updated on 10/22/2025@mrbirddev
了解如何通过重排内容、固定尺寸、相对尺寸和断点（媒体查询）来创建响应式设计。
当你在移动设备上访问网站时，可能会看到一个桌面版本的网站被压缩到较小的屏幕上——迫使你缩放和滚动以查看任何内容。你也可能会进入一个简化的移动版本，缺乏桌面版本的内容和体验。然而，希望你看到的是一个响应式网站——一种根据浏览器宽度重新排列和重新定位内容的设计。
我们将在这里介绍响应式设计的三个不同方面：
- 重排内容
- 固定尺寸
- 相对尺寸
- 断点（媒体查询）
重排内容
重排内容是指根据浏览器视口宽度调整其宽度的内容。例如，具有默认设置的段落会在浏览器宽度变小时自动换行。可以通过拖动设计器画布的边缘来模拟这种行为。
固定尺寸
使用固定像素宽度时要注意。例如，如果给图像设置500px的宽度，它在桌面或平板电脑上可能看起来不错。然而，当在较小的移动设备上查看图像时，图像宽度将固定在500px，不会适应较小的视口（通常小于500px）。
相对尺寸
这指的是将元素的大小设置为相对于其他事物，如浏览器宽度或父元素。例如，与其为图像使用基于像素的大小，不如考虑使用不同的单位，如%、VW（视口宽度）或VH（视口高度）。如果在图像上使用%，并调整浏览器宽度，你会看到它会相应地适应，而基于px的图像则不会。
了解更多关于应用不同单位来控制元素宽度和高度的信息。
断点
布局通常比管理一个图像的宽度要复杂得多。使用断点（也称为媒体查询）不仅可以测试内容的重排，还可以根据不同设备的宽度范围修改设计和布局。
了解更多：
Last updated on 10/22/2025@mrbirddev
Recent Articles