CSS基础教程（四十五）响应式 Web 设计之媒体查询：别让你的网站在手机上“社死”！深度解剖CSS媒体查询の终极奥义

第一章：为啥我的网站在手机上“裂开了”？——响应式设计与媒体查询的救赎

想象一下这个场景：你熬了三个通宵，精心雕琢了一个堪称艺术品的公司官网。在你这台27英寸的4K超清显示器上，它布局精妙，图片炫酷，字体优雅，一切都恰到好处。你心满意足地按下F12，切换到手机预览模式……

“WTF？！”

导航栏堆叠得像一团乱麻，那张帅气的CEO照片只剩下一个左耳朵，更可怕的是，那个至关重要的“立即购买”按钮，它……它竟然和页脚私奔到了屏幕外！你的网站在手机上经历了一场彻头彻尾的“社交性死亡”（社死）。

病因诊断：你的网站得了“静态布局固定宽度”绝症。它以为全世界所有的屏幕都和你那27寸的大家伙一样宽。

解药：响应式Web设计（RWD, Responsive Web Design）。而这副解药里最核心、最强大的一味药材，便是我们今天的主角——CSS媒体查询（Media Queries）。

媒体查询，就像是给你网站配备的一位超级智能的“变形金刚”内核。它能实时侦察用户设备的“军情”（屏幕宽度、高度、方向、分辨率等），然后根据这些情报，动态地施加不同的CSS样式规则，从而实现“兵来将挡，水来土掩”的响应效果。

第二章：媒体查询の“手术刀”解剖——核心语法全解密

别被“媒体查询”这个名字吓到，它的语法其实优雅得像一首诗。

基本结构：@media 规则

@media [媒体类型] and (媒体特性) {
  /* 你的CSS样式规则 */
}

让我们把这把“手术刀”的每个部件拆开看看：

1. 媒体类型 (Media Type)： 指定这条规则适用于哪类设备。

• all：默认值，所有设备通吃。
• screen：最最最常用的，指电脑屏幕、平板、手机等。
• print：打印预览模式，可以专门设置打印时的样式（比如隐藏导航，调整字体颜色为纯黑以便节约墨水）。
• speech：适用于屏幕阅读器等语音合成器。

现在，screen 是绝对的主角，所以很多时候我们甚至直接省略媒体类型。

2. 媒体特性 (Media Features)： 这才是真正的“情报内容”，描述了设备的具体能力。它们必须被括号 () 包裹。