语法与常见断点
学习媒体查询语法，以及现代网页设计中使用的标准断点。
语法与常见断点 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
媒体查询语法
媒体查询会包装 CSS 规则，并且只在条件为真时应用这些规则。基本语法如下：
<div class="box">Media query syntax demo</div>
媒体类型
最常见的媒体类型：
all— 应用于所有输出设备（默认值）screen— 计算机和手机屏幕print— 打印预览和打印speech— 屏幕阅读器
<div class="layout">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
媒体特性
媒体特性描述设备或视口的特征。常见特性包括：width、height、orientation、resolution、prefers-color-scheme 和 hover。
min-width 查询
最常用的媒体特性：针对宽度达到或超过某个阈值的屏幕。这是移动优先的开发方式。
<div class="box">Breakpoint ladder</div>
常见断点
不存在放之四海而皆准的正确断点。下面是一组基于常见设备宽度的常用设置：
- 480px — 大型手机
- 768px — 平板电脑
- 1024px — 小型桌面设备、横屏平板电脑
- 1280px — 标准桌面设备
- 1536px — 大型桌面设备
基于内容的断点
现代实践不会按照设备设置断点，而是将断点设置在内容开始出现问题的位置。先针对一种尺寸进行设计，然后调整尺寸；当布局开始变得难看时，再添加断点。
范围语法（现代写法）
现代 CSS 支持在媒体查询中使用范围语法，比组合使用 min 和 max 更易读：
<div class="panel">Range syntax demo</div>
使用 and 组合条件
使用 and 要求多个条件同时满足：
<div class="sidebar">Sidebar</div>
使用 not 进行否定
使用 not 对媒体查询进行否定。它适用于所有与查询不匹配的情况：
<div class="doc">Not-screen demo (affects print/speech only)</div>
使用逗号组合多个查询
使用逗号分隔多个查询，就像选择器列表一样。如果 ANY 一个查询匹配，样式就会应用。
<div class="page">
Multiple queries with comma
<div class="nav-drawer">Nav drawer (hidden on wide screens or print)</div>
</div>
基于 em 的断点
使用 em 单位设置断点，而不是使用 px，可以让断点随用户的浏览器字号偏好进行缩放，从而提升可访问性。
<div class="box">Em-based breakpoints</div>
快速检查
哪个媒体查询可以匹配宽度至少为 1024px 的屏幕？
回顾
媒体查询会根据设备或视口特征有条件地应用 CSS。移动优先时使用 min-width，桌面优先时使用 max-width。应根据内容需要设置断点，而不是根据任意的设备尺寸设置断点。现代范围语法可以提升可读性。
常见问题解答
「语法与常见断点」课时是免费的吗？
是的 — 「语法与常见断点」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「语法与常见断点」这节课中我会学到什么？
学习媒体查询语法，以及现代网页设计中使用的标准断点。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「语法与常见断点」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。