响应式设计与交互

响应式布局让页面随视口、容器尺寸与用户偏好自适应。核心手段：视口 meta、弹性单位、媒体查询（视口级）与容器查询（组件级）。单位详解见字体单位；布局见 Flex、Grid。

视口（Viewport）

移动端浏览器曾为适配桌面页使用约 980px 布局视口 并缩小显示。应在 HTML 中声明：

html

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

参数	含义
`width=device-width`	布局视口宽度 ≈ 设备 CSS 像素宽度
`initial-scale=1`	初始缩放 1:1

无障碍：避免 user-scalable=no 或 maximum-scale=1 阻止用户 pinch 放大（WCAG 建议允许缩放）。

媒体查询（`@media`）

根据视口或用户偏好应用样式，是实现页面级断点的常用方式。

css

/* 移动优先：默认小屏样式 */
.container {
    width: 100%;
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
        margin-inline: auto;
    }
}

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

常用查询（不限于宽度）：

(min-width: …) / (max-width: …)
(prefers-color-scheme: dark) 深色模式
(prefers-reduced-motion: reduce) 减少动效
(orientation: landscape) 横竖屏

断点宜按内容与组件，而非固定设备型号。

容器查询（`@container`）

媒体查询只看视口；同一组件放在宽栏与窄栏时，视口相同但容器不同——容器查询按祖先容器尺寸切换样式。

css

.card-wrapper {
    container-type: inline-size; /* 或 container: card / inline-size */
    container-name: card; /* 可选，命名后便于定向查询 */
}

.card {
    display: flex;
    flex-direction: column;
}

@container card (min-width: 400px) {
    .card {
        flex-direction: row;
    }
}

概念	说明
`container-type: inline-size`	查询容器行向（宽度）
`container-type: size`	行向与块向均可查（需明确高度）
`@container (min-width: …)`	条件满足时应用内部规则
`cqw`、`cqi` 等	相对容器尺寸的容器查询单位（见下表）

详见现代 CSS 特性概览。

容器查询单位（常用）

单位	含义
`cqw`	查询容器宽度的 1%
`cqh`	查询容器高度的 1%
`cqi` / `cqb`	行内 / 块向尺寸 1%（随书写模式）
`cqmin` / `cqmax`	`cqi` 与 `cqb` 的较小/较大者

媒体查询进阶

范围语法（Level 4）

除 (min-width: 768px) 外，可使用比较运算符（与数学区间一致）：

css

@media (width >= 768px) {
    /* 等价于 min-width: 768px */
}
@media (768px <= width <= 1200px) {
    /* 区间 */
}

交互与能力查询

查询	用途
`(hover: hover)`	主输入可悬停（桌面鼠标）
`(pointer: fine)`	精细指针（鼠标、触控笔）
`(prefers-reduced-motion: reduce)`	用户请求减少动效
`(prefers-color-scheme: dark)`	深色配色偏好

组件 hover 样式宜与 (hover: hover) 组合，避免触摸设备「粘住」hover 态。

弹性单位（概要）

单位	参照	典型用途
`%`	父元素对应属性	宽度、部分高度（高度需父级有明确高度）
`vw` / `vh`	视口宽/高 1%	全屏区块
`dvh` / `svh` / `lvh`	动态 / 小 / 大视口高度 1%	移动端全屏高度；`100dvh` 随地址栏显隐变化
`vmin` / `vmax`	vw 与 vh 较小/较大者	正方形、自适应缩放
`rem`	根元素 `font-size`	全局字号与间距（不必依赖 JS）
`em`	当前/父级字号	组件内随字号伸缩的 padding
`clamp(min, pref, max)`	—	流式字号：`font-size: clamp(1rem, 2.5vw, 1.5rem)`

rem 通过修改 html { font-size: 100%; } 或媒体查询调整根字号即可全站缩放，无需 rem+JS 适配方案才能生效。

设计思路小结

Viewport meta：移动端正确宽度与可缩放。
弹性单位 + clamp：骨架可伸缩。
媒体查询：页面级布局断点、主题与动效偏好。
容器查询：组件在任意栏位自适应。

参考文献

以下链接在编写时均可正常访问：

资料	说明
MDN：使用视口 meta 标签	viewport 说明
MDN：使用媒体查询	@media 语法
MDN：CSS 容器查询	container-type、@container
MDN：clamp()	流式尺寸
W3C：Media Queries Level 4	媒体查询规范（英文）
W3C：CSS Containment Module Level 3	容器查询规范（英文）
MDN：dvh	动态视口高度单位
MDN：Container query length units	cqw、cqi 等