响应式设计 - HTML & CSS

01. 响应式设计的核心思路

响应式就是让一个网页在手机、平板、电脑上都能看得舒服。核心是这个观点：不要把设计写死在某个固定宽度上，而是让布局根据屏幕大小自适应。主要有三种手段：媒体查询、流式布局（flexbox/grid）、响应式单位（vw/vh/rem）。三者结合才是正道。

css

/* 移动优先的媒体查询 */
.container { padding: 16px; }

@media (min-width: 768px) {
  .container { padding: 32px; }
}

@media (min-width: 1024px) {
  .container { max-width: 960px; margin: 0 auto; }
}

先写移动端样式，再用 min-width 逐步覆盖桌面端，这叫移动优先策略。

02. 媒体查询 Media Queries

媒体查询是响应式的基石，就是给不同条件的屏幕写不同的 CSS 规则。常用的有 min-width、max-width、orientation 等。可以把断点值定义成 CSS 变量或预处理器变量统一管理，不要到处写魔术数字。

css

:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}

@media (min-width: var(--bp-md)) {
  .sidebar { display: block; }
}

CSS 变量在媒体查询条件中不生效，需要用预处理器或 PostCSS 插件。

03. Flexbox 弹性布局

Flexbox 是一维布局方案，要么控制横向排列要么控制纵向排列。display: flex 激活弹性容器，里面的子元素就变成弹性项目了。常用属性：justify-content 控制主轴对齐，align-items 控制交叉轴对齐，flex-wrap 控制是否换行。

css

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 300px;
  min-width: 0;
}

flex: 1 1 300px 意思是最小 300px，空间足够就均分，不够就换行。配合 flex-wrap 轻松实现响应式网格。

04. CSS Grid 网格布局

Grid 是二维布局方案，能同时控制行和列。特别适合页面整体布局和复杂的卡片网格。grid-template-columns 定义列规则，auto-fit/auto-fill 配合 minmax 可以自动计算该放几列，完全不用写媒体查询就能响应式！

css

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}

/* 页面布局 */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

05. 响应式单位和 Clamp

vw 是视口宽度的百分比，适合做流体排版。但纯 vw 有极限，屏幕很大字就巨大，屏幕很小字就看不清。clamp 函数能设上下限：clamp(最小值, 理想值, 最大值)，字体会在范围内平滑缩放。rem 相对于根元素字号，适合整体缩放。

css

h1 { font-size: clamp(24px, 5vw, 48px); }
p { font-size: clamp(16px, 2vw, 20px); }
.hero { padding: clamp(32px, 8vw, 120px) 0; }

clamp 结合 vw 是实现流体排版最优雅的方式，几乎不需要媒体查询来调字号。

知识测验

第 1/4 题正确 0

移动优先策略是什么意思？

CSS 动画