CSS 响应式设计

响应式网页设计 (Responsive Web Design, RWD) 是一种 Web 设计方法，旨在使网页能够根据用户正在使用的设备（无论是手机、平板、笔记本电脑还是桌面显示器）的屏幕尺寸、平台和方向，自动调整和优化其布局和内容。

其核心理念是：一套代码，普遍适用 (One code base, for every device)。

响应式设计主要由三个核心技术组成：

流式网格 (Fluid Grids)
弹性图片 (Flexible Images)
媒体查询 (Media Queries)

1. 流式网格 (Fluid Grids)

与使用像素 (px) 等固定单位来定义布局宽度的传统“固定布局”不同，流式网格使用相对单位，如百分比 (%)。这使得布局可以像液体一样，根据其容器（通常是浏览器视口）的大小进行伸缩。

css

.container {
  width: 90%; /* 宽度是父元素的 90% */
  max-width: 1200px; /* 但最大不超过 1200px，防止在大屏幕上过宽 */
  margin: 0 auto;
}

.column {
  width: 50%; /* 每个列占据容器的一半宽度 */
  float: left;
}

现代布局技术如 Flexbox 和 Grid 是构建流式网格的更强大、更灵活的工具。它们提供了对齐、分布和排序的精确控制，是现代响应式设计的首选。

css

.container {
  display: flex;
  flex-wrap: wrap; /* 允许项目换行 */
}

.item {
  flex: 1 1 300px; /* 弹性增长、弹性收缩、基础宽度为 300px */
}

2. 弹性图片 (Flexible Images)

在响应式布局中，图片也需要能够缩放以适应其容器。最简单的方法是设置其 max-width 为 100%。

css

img {
  max-width: 100%;
  height: auto; /* 保持图片的原始宽高比 */
}

这行代码可以防止图片溢出其容器。当容器变窄时，图片会随之缩小。height: auto; 确保图片在缩放时不会被拉伸或压缩。

对于更高分辨率的屏幕（如 Retina 显示屏）或需要根据不同屏幕尺寸加载不同大小图片以优化性能的情况，可以使用 HTML 的 <picture> 元素或 <img> 标签的 srcset 和 sizes 属性。

3. 媒体查询 (Media Queries)

媒体查询是响应式设计的“大脑”。它允许我们定义“断点 (Breakpoints)”，在这些断点处，布局和样式会发生改变以适应新的屏幕尺寸。

例如，一个在桌面上显示为三列的布局，在平板上可能变为两列，在手机上则变为单列。

css

.column {
  width: 100%; /* 默认（移动端）为单列 */
}

/* 平板尺寸 */
@media (min-width: 768px) {
  .column {
    width: 50%; /* 变为两列 */
  }
}

/* 桌面尺寸 */
@media (min-width: 1024px) {
  .column {
    width: 33.33%; /* 变为三列 */
  }
}

视口元标签 (Viewport Meta Tag)

最后，为了确保响应式设计在移动设备上正常工作，你必须在 HTML 的 <head> 部分添加视口元标签。

html

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

width=device-width: 告诉浏览器将视口的宽度设置为设备的屏幕宽度。
initial-scale=1.0: 设置页面首次加载时的初始缩放级别为 100%。

CSS 响应式设计 ​

1. 流式网格 (Fluid Grids) ​

2. 弹性图片 (Flexible Images) ​

3. 媒体查询 (Media Queries) ​

视口元标签 (Viewport Meta Tag) ​

CSS 响应式设计

1. 流式网格 (Fluid Grids)

2. 弹性图片 (Flexible Images)

3. 媒体查询 (Media Queries)

视口元标签 (Viewport Meta Tag)