断点跟着内容走，不跟着机型走

媒体查询命中的是哪一档，拖动 iframe 右边缘观察本条与下面网格的变化。

① 移动优先：默认写窄屏，逐级 min-width 增强

主内容：默认单列 → 640px 起占满两列 → 960px 起进入中间列
侧栏一
侧栏二
/* 默认（最小屏）样式不要包在媒体查询里 */
.layout { display: grid; gap: 12px; }
@media (min-width: 40rem) { .layout { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .layout { grid-template-columns: 200px 1fr 200px; } }
/* 相反写法（桌面优先）用 max-width：默认给桌面，逐级降级 —— 容易漏掉基础样式，不推荐新项目使用 */

② 断点怎么选

做法评价
照抄某框架的 576/768/992/1200能用，但那些数字与你的内容无关
把浏览器从 320px 慢慢拉宽，在哪里「变丑」就在哪里设断点推荐的办法：断点是内容给出的信号，通常 2–4 个就够
用 auto-fit + minmax()（11b）替掉一部分断点卡片墙、图库最省，能少写一半媒体查询

单位建议：断点写 rem（min-width: 40rem）而不是 px —— 用户放大根字号时，媒体查询会提前触发，避免文字溢出。注意 1rem = 16px 的换算在部分浏览器里会被强制以 16 计算。

③ 范围与组合

只有在 40rem–60rem 之间才有橙色背景（也可以用新语法 @media (40rem <= width <= 60rem)）
@media screen and (min-width: 40rem) { … }        /* 传统写法 */
@media (40rem <= width <= 60rem) { … }            /* 范围语法，现均已被主流浏览器支持 */
@media not all and (min-width: 60rem) { … }       /* not 取反 */
@media (min-width: 60rem), (orientation: landscape) { … }  /* 逗号 = or */

④ 不只是宽度：这些特性查询同样属于媒体查询

prefers-color-scheme：本块的背景会跟随系统深浅色变化（本站的暗色主题用的是 html[data-theme] 手动切换，原理见第十四章）。

hover/pointer 查询：@media (hover: hover) and (pointer: fine) 里只写鼠标专属效果，避免触屏「点一下卡在 hover 态」。

prefers-reduced-motion: reduce 时这个转圈动画会被关掉 —— 动效一定要留这条逃生通道（第十八/二十一章）。

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}   /* 全站级简化写法，副作用可控，但更推荐逐条设计静态替代方案 */

其它：orientation、aspect-ratio、display-mode: standalone（PWA）、forced-colors（Windows 高对比）、color-gamut、update: slow（电子墨水）。

⑤ 打印样式

这一条是 .no-print：屏幕上看得到，打印预览里会消失。

这一段只在打印/导出 PDF 时出现，并会把链接地址补在文字后面。

@media print 常用于：隐藏导航与按钮、把折叠内容展开、用 break-inside: avoid 避免卡片被分页截断、给外链补上真实地址。

⑥ 与容器查询的分工（预告）

这个卡片由 @container 决定横排还是竖排：它看的是父容器宽度而不是视口宽度，所以同一个组件放进侧栏是竖排、放进主区是横排。详见第二十章。