响应式的目标与思路

用户用手机、平板、笔记本、大屏显示器打开同一个网站，看到的应该是同一份内容、同样舒服的阅读体验，而不是缺胳膊少腿的页面。响应式设计的核心不是"适配多少种设备"，而是"用一套代码，让布局随可用宽度自然流动"：内容与结构不变，排版随视口变化。

思路可以概括为三步：内容优先，先想清楚小屏上什么最重要；布局弹性化，用流式栅格与相对单位代替写死像素；断点收尾，在布局实在放不下时才用媒体查询调整。

本文核心知识点
  • 断点按内容需要而非设备型号设宽度。
  • 流体百分比与弹性单位铺满任意宽度。
  • 移动优先先写小屏再渐进增强。
  • 图片按视口选尺寸，省流量保清晰。
响应式设计配图：蓝紫渐变背景左侧智能手机、中间台式电脑显示器、右侧平板电脑三台设备屏幕显示同色渐变内容，扁平矢量插画
同一份内容在手机、电脑、平板上自适应呈现，正是响应式的意象。

断点策略：别跟着设备走

最常见的断点误区是按 iPhone、iPad 的具体宽度写媒体查询，设备迭代一快，断点全废。正确的做法是按内容设断点：内容排不开、行宽过度或列数不合理的位置，才是断点的位置。主断点控制在两到三个，维护成本最低。

/* 内容驱动断点：放不下两列时切回单列 */
.card-list { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .card-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-list { grid-template-columns: repeat(3, 1fr); }
}

断点粒度上，推荐用最小宽度（min-width）从小到大写，配合移动优先的思路；避免大量中间断点，宁可让布局在断点之间平滑过渡。真实场景里还要考虑容器查询：组件在自己的容器变窄时响应，而不是等整个视口变化。

流体布局与弹性单位

流体布局的底座是相对单位：宽度用百分比或 fr 单位让容器随视口伸缩；字号用 rem 保持缩放一致；间距用 clamp 让留白在最小与最大值之间自适应。避免固定像素宽度、避免一长串媒体查询去微调每个尺寸的 padding。

/* 弹性字号：宽度越大字号越大，但有限制 */
.article-title {
  font-size: clamp(1.6rem, 2vw + 1rem, 2.8rem);
}

栅格系统是流体布局的骨架：用 CSS Grid 的 auto-fit 与 minmax 就能让卡片列数随宽度自动变化，不需要为每种宽度写一遍布局。注意 min-width: 0 这类细节，防止长单词或长内容把栅格撑破。

图片与媒体自适应

图片是响应式最容易翻车的部分：一张 2MB 的桌面大图在小屏手机上原样加载，流量费钱、加载变慢。响应式图片的标配是 srcset 加 sizes：按视口宽度让浏览器自己挑合适尺寸的图；配合 loading 懒加载与正确宽高比占位，首屏体验会好很多。

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(min-width: 1024px) 800px, 100vw"
  alt="响应式图片示例">

视频与 iframe 同样要自适应：用 aspect-ratio 固定宽高比，防止布局跳动；大背景图用 background-size: cover 配合合适的分辨率。表格在窄屏可以横向滚动容器包裹，或者关键列优先、其余列折叠。

移动优先与渐进增强

移动优先是从小屏开始写样式，再用 min-width 媒体查询逐步增强。好处是：小屏样式天然精简，性能负担小；语法上不用写一堆 max-width 覆盖，逻辑更顺。渐进增强则保证老浏览器也能读到基础内容，新特性只是锦上添花。

/* 移动优先：基础样式 + 增强断点 */
.nav { flex-direction: column; }
@media (min-width: 768px) {
  .nav { flex-direction: row; }
}

交互上要照顾触屏：点击目标不小于 44 像素，hover 效果要有点击等价路径，横向滑动区域要有滚动提示。字号不小于 14px，输入框不小于 16px 防止 iOS 聚焦缩放。