正在加载...

CSS 断点

媒体查询讲 @media 如何触发。响应式图片讲图片如何适配查询所创造的 slot。断点是规划：一份短列表，列出布局策略改变的视口宽度 — 列、导航、间距 — 命名一次、全站复用，整站同步切换。

断点工具箱

📊 断点一览

部分 日常作用
断点 布局规则按计划改变的宽度
内容驱动选择 设计显得挤或空时的宽度 — 不是手机 SKU
命名阶梯（sm、md、lg…） 全站同一 token；审计与协作更轻松
移动优先阶梯 基线 = 窄屏；min-width 步骤叠加增强
步骤间流式 新查询前用 %、rem、Flex/Grid
成文集合 注释或 token 里一份短列表 — 不是二十个一次性数值

断点不是「某款 iPhone」。而是「侧边栏再也挤不进文章旁边」或「导航可以排成一行」。先看内容，再写一条共享步骤。

内容优先 — 不是设备目录

拖动浏览器宽度直到某处崩坏：行太长、卡片被压扁、明明有空间仍用汉堡菜单。用 rem（或 em）记下该宽度。这比抄营销用的手机像素表更靠谱。

注释决策，而非设备

css 
/* Break when article + sidebar need two columns (~48rem content width) */
@media (min-width: 48rem) {
.layout {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
}

逐机型的像素表老化很快 — 每年都有新手机。少数内容驱动步骤更耐用，样式表也更易读。

为步骤命名 — 复用相同宽度

典型站点两至四步即可。在注释里（或用存宽度值的 CSS 自定义属性）取短名。凡「开启宽布局」的组件都应使用同一数值 — 不要 header 用 720px、网格用 768px。

命名断点 token（自定义属性）

css 
:root {
--bp-md: 40rem;
--bp-lg: 64rem;
}

/* Usage still needs a literal in @media in classic CSS —
keep tokens and queries in sync, or use a preprocessor/build step. */
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 64rem) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}

经典 CSS 里 @media 并不能在所有浏览器里把自定义属性当条件如你所愿 — 因此 :root token 主要是文档与 JS/工具辅助；查询里的字面量请保持一致。关键习惯：一条共享阶梯，而非每个文件随机宽度。

移动优先阶梯

无查询地写窄屏默认。每个 min-width 步骤追加列、更大字号或横向导航。别在每一步重写整页 — 只改清晰的一层。

三步移动优先阶梯

css 
.nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}

@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (min-width: 64rem) {
.nav {
flex-direction: row;
align-items: center;
gap: 1.5rem;
}

.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}

桌面优先收紧（从宽布局起步时）

若项目已是宽布局，可用 max-width 查询在小视口上收拢列。保持一致：同一组件不要无理由混用 min-width 与 max-width。

单步桌面优先收紧

css 
.sidebar {
width: 18rem;
float: left;
margin-right: 1.5rem;
}

@media (max-width: 39.99rem) {
.sidebar {
float: none;
width: auto;
margin-right: 0;
}
}

每个项目宜只选一个方向。媒体查询课已讲 min-width 与 max-width 语法 — 此处是策略规则：共享步骤、全站同一思路。

一步，多组件

当 --bp-lg（或 64rem）触发时，若导航、网格与间距同属一章布局，应一起更新。散落的「差不多」宽度会出 bug：页头比主网格更早切换。

导航与 main 共享大步骤

css 
@media (min-width: 64rem) {
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.main {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
}
}

先流式 — 后查询

断点之间，Flex、Grid、% 与 rem 应已吸收小幅宽度变化。只有需要结构变化（列数、导航模式）时才加新查询。查询越多不代表越专业。

自己动手

  1. 缩放练习页，列出布局真正需要改变的两处宽度。
  2. 转为 rem 并命名（md、lg）。
  3. 把相同两个 min-width 同时用于卡片网格与导航。
  4. 在 CSS 中搜索其它 min-width/max-width 数值 — 合并近似重复。
  5. 通过改进流式基线（gap、minmax、换行）去掉一条多余查询。

常见错误

  • 罗列各手机宽度，而非内容痛点
  • 十二条略有差异的像素查询叠在一起
  • 页头在 768px、主区在 800px、页脚在 720px 才断
  • 跳过流式 CSS，每个微调都加 @media
  • 在此重教 @media 括号或 srcset，而非规划阶梯

小结

  • 断点是计划的布局步骤 — 命名少量集合并复用
  • 宽度来自内容压力，不是设备营销表
  • 优先移动优先 min-width 阶梯；每项目一个方向
  • 步骤间保持流式；查询只用于结构变化
  • 本节结束 Responsive 模块 — 下一步：Effects & Motion 中的 Box Shadow

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 57 的 61
Css 教程