摘要

  • W3C 在 2001 年 4 月 4 日发布首份 Media Queries 工作草案。当时 HTML4 和 CSS2 已能区分 screen 与 print 等媒体类型；新草案把问题细化到显示环境的具体特征。
  • 2002 年 7 月 8 日的候选建议推进了规范；2012 年 6 月 19 日的正式建议确定了宽度、高度、颜色等条件表达式。作者据此选用样式，文章内容仍是一份。

在设计师的宽屏上，这篇报道穿着三栏西装，肩线平整，导航也规规矩矩。有人把窗口往里一拖，侧栏先碰了正文的胳膊，标题接着被挤出气势。屏幕另一头，打印机递来一张纸：别把整套导航也塞给我。文字没有惹祸，麻烦出在西装只有一个尺码。

W3C 2001 年 4 月 4 日的首份 Media Queries 工作草案说得很清楚：HTML4 与 CSS2 已有 screen、print 之类的媒体类型。屏幕和纸张可以分开安排样式。可「屏幕」这个标签太宽，两块显示区域都叫屏幕，留给页面的地方却可能大不相同。只问是不是屏幕，就像裁缝只问顾客是不是人。

草案于是让样式表继续追问：视口多宽、多高？有颜色吗？分辨率如何？min-width 可以标出一种排版所需的下限，max-width 可以照顾更窄的空间。打印页面也有自己的宽度条件。浏览器知道读者眼前的环境，作者写出匹配条件。条件成立，相关样式上场；文章的句子继续做文章的句子。

拿三栏报道来说，宽窗口可以让图片、正文和旁栏并排。窗口变窄，样式可以把旁栏移到正文下方，给标题腾出横向空间。打印时再去掉用来点击的导航，整理纸面边距。这里发生的是呈现方式的选择，不是编辑部悄悄写了三版报道。页面换衣服，记者不用每次重写导语。

2002 年 7 月 8 日的 W3C 候选建议把这套问答推进到供实现检验的阶段。「候选」是标准制定过程中的位置，不能据此推断当年所有浏览器已经穿得整整齐齐。文本的核心仍然是那道分工：作者定义何时用哪套样式，用户代理依据所在环境作判断。

到 2012 年 6 月 19 日的 W3C 正式建议，语法与特征有了正式参照。媒体类型可以带零个或多个特征表达式。规范给出了 min-width、max-width 的区间例子，也讨论高度、颜色和纸张宽度。真正有用的断点，应当落在内容开始互相推搡的位置：例如标题再窄就断得难看，表格再挤就读不清。按当年的某款设备名字选断点，设备下架后只会留下一个莫名其妙的数字。

还有一个常把会议室吵热的细节：查询里的 px 指 CSS 像素，不是拿放大镜数出的物理屏幕像素。高密度显示屏可以有很多物理点，CSS 看到的布局宽度却是另一回事。裁缝看的是衣服在身上的尺寸，不是布料的纤维数。要决定三栏何时改成一栏，就盯着内容何时放不下。

2012 年文本还规定了 only、not 以及未知特征的处理。它期望用户代理在环境变化后重新评估查询并重新排版，但没有把每一次即时反应都写成绝对义务。编辑真正要检查的，是页面在目标浏览器里缩窄、放宽、打印之后的样子。语法再漂亮，也不能替一张挤坏的页面道歉。

媒体查询把量尺交给了浏览器，把剪裁权留给作者。作者决定哪里需要换装，浏览器判断眼前是否到了那个条件，读者一拖窗口就能看到设计是否有数。那篇三栏报道最终在窄窗口排成一列，在纸上卸下菜单。故事没有改变，终于穿对了场合。