一、媒体类型只剩四个还在用

早期规范里还列过 handheld、tv、projection、aural、braille 这些，在媒体查询第四版里已经全部废弃。原因很现实：设备种类变得太快，按设备名分类永远跟不上——手机能打电话也能上网，电视能上网也能当显示器，按名字分类迟早失效。

所以规范改了思路：从【按设备类型分】改成【按能力特性分】。 这就是下面要说的媒体查询。

二、媒体查询：从问【你是谁】到问【你能做什么】

严格说，媒体查询是媒体类型的超集——它既能为某类设备限定，也能直接问设备的特性。

后两种不带设备名，直接问能力——这才是现代写法。 它的好处是：不必猜用户拿的是什么设备，只关心他此刻能不能悬停、喜不喜欢深色。

两个实用场景：用 hover 判断【有没有鼠标】来平衡【悬停展开菜单】这种交互（触屏上悬停会变成一次多余的点击）；用 prefers-color-scheme 提供深色主题，跟随系统设置而不是自己造一个开关。

再往前一步是容器查询：不再问屏幕多宽，而是问【我所在的这个容器多宽】。 同一个卡片放在侧栏和放在主区会按各自容器切换样式——这对组件化的网站是更准确的做法。

三、print 这一支最容易被忘

打印样式通常没人做，直到有人要把报价单打出来。这一支只需要管五件事：

最后一条最实用：屏幕上的【点击这里】到了纸上就失去意义，打印版要把链接的真实地址补在文字后面，否则读者拿到纸也没法访问。

还有个反直觉的事实：写了 media=print 的样式表，Chrome 和 Firefox 在页面加载时仍会去下载（约 85% 的打印样式表被提前拉走），只有 Safari 会拖到真正打印时才取。所以 print 样式别塞太多东西——它是要计入首屏加载成本的。

四、动手 Demo：打印样式表的隐形成本

把【85% 被提前下载】这句话换算成一个页面加载的真实负担。

print("  print 样式表被提前下载的比例：约 85%")
print("  也就是说，100 KB 的打印样式，有 85 KB 是白下载的")
print("  结论：print 里只留必要的几十行")

实跑输出：

--------------------------------------------------------------------
媒体类型——同一份内容，不同设备不同样子
--------------------------------------------------------------------
  CSS 里的媒体类型（media type）只有四个还在用：

  媒体类型     针对什么
  --------------------------------------------
  all          所有设备（默认值，写不写一样）
  screen       屏幕：电脑、平板、手机
  print        打印预览与打印机
  speech       屏幕阅读器的语音合成
  --------------------------------------------
  早期还列过 handheld、tv、projection、aural、braille 这些，
  在媒体查询第四版里已经全部废弃——设备种类变得太快，
  按设备名分类跟不上，现在改成按【特性】分类。

  所以严格说：媒体查询是媒体类型的超集。
  写法上先框设备，再框条件：

  写法                                     意思
  ----------------------------------------------------------
  @media screen                            只要是屏幕设备
  @media print                             只有在打印时
  @media screen and (min-width: 768px)     屏幕且宽度够
  @media (prefers-color-scheme: dark)      系统开了深色模式
  @media (hover: hover)                    设备真的能悬停
  ----------------------------------------------------------
  后两种不带设备名，直接问能力——这才是现代写法。

  print 这一支最容易被忘掉，其实只需要管五件事：

  要做的事         怎么写
  ----------------------------------------------------
  去掉无关元素     把导航、广告、侧栏设为不显示
  字号换单位       正文用 pt，屏幕上用 px 或 rem
  背景改白         多数打印机不印背景色，省墨也防花
  控制分页         禁止在标题或表格中间断开
  保留关键信息     按钮改成文字说明，链接补上完整地址
  ----------------------------------------------------
  一个反直觉的事实：写了 media=print 的样式表，Chrome 和 Firefox
  在页面加载时仍会去下载（约 85% 的打印样式表被提前拉走），
  只有 Safari 会拖到真打印才取。所以 print 样式别塞太多东西。

看第二行：85 KB 是白白拉走的。手机用户在弱网环境下，这 85 KB 是实实在在的等待。 所以 print 的正确写法是【极简】：隐藏几块元素、改字号、控制分页、补上链接地址——几十行就够，不需要把整站样式重写一遍。 回到媒体类型那张表：四个类型里，screen 是默认、print 是必须、speech 常被忽略。 speech 对应的是屏幕阅读器——语义清晰的 HTML（正确的标题层级、表格表头、图片替代文字）比专门的样式更有用。

30 秒实验

1. 打开一个网页按 Ctrl+P 看预览，找出三个【打印出来毫无意义】的元素。
2. 把你手机设成深色模式，打开几个常用网站，看哪些跟着变了、哪些没变。
3. 在你自己的网站上试一次 Ctrl+P，看导航栏是不是被印上去了。

常见误区

1. 错误：媒体类型有很多种，要一个个照顾。——纠正：实际只有 all、screen、print、speech 四个还在用。 其余（handheld、tv、projection 等）已在新版规范里废弃。
2. 错误：媒体查询就是为了做响应式布局。——纠正：宽度只是它的一种用法。 它还能管配色偏好、悬停能力、动画偏好、对比度需求——这些都属于【为不同用户提供合适体验】。
3. 错误：打印样式可有可无。——纠正：报价单、订单、说明书都是要被打印的。 而且打印样式表还会被计入正常加载——做了要做得轻，不做也不省。

• ☐ 下一节（7-10 图像文件的种类：JPEG、PNG、GIF）

相关笔记

• 提供对智能手机与PC的支持 —— 上一节管尺寸，这一节管设备能力
• Web网页的次要部分 —— 媒体类型写在 CSS 里
• 浏览器的功能 —— 渲染路径与样式优先级
• 设计Web网页的外观 —— 样式表的另一套讲法
• 图像文件的种类 —— 图片也是【按环境给不同版本】的一个例子
• 🕸️ Web技术原理 · 索引