白骑士的CSS进阶篇之响应式设计 3.2.2 自适应布局

系列目录

上一篇：白骑士的CSS进阶篇之响应式设计 3.2.1 媒体查询

        在响应式网页设计中，自适应布局（Adaptive Layout）是一种关键策略，它确保网页能够在不同设备和屏幕尺寸上提供一致的用户体验。自适应布局主要包括流式布局（Fluid Layout）和弹性布局（Flexible Layout）。这两种布局方法各有特点，能在不同的应用场景中发挥作用。

流式布局（Fluid Layout）

        流式布局，又称为液体布局，是一种通过百分比宽度来定义网页元素尺寸的布局方法。与固定布局（Fixed Layout）不同，流式布局允许网页元素根据容器的宽度自动调整大小，从而适应不同的屏幕尺寸。

基本概念

        流式布局的核心在于使用百分比宽度来设置元素的宽度。这种方法使得网页的布局能够随着视口的大小变化而自适应。例如，当视口宽度增加时，元素的宽度也会相应地增加，反之亦然。

        示例：

.container {
  width: 80%; /* 容器宽度为视口宽度的80% */
}

.column {
  width: 50%; /* 列