CSS3 媒体查询完全指南：响应式设计的核心利器

        在移动设备种类繁多的今天，一套网页需要在手机、平板、笔记本、大屏显示器上都能呈现出良好的布局与可读性。CSS3 媒体查询（Media Queries）正是实现这种“一次设计，处处适应”的关键技术。它允许开发者根据设备特性（如视口宽度、屏幕分辨率、方向、色彩能力等）有条件地应用样式规则，从而构建真正的响应式网站。本文将从语法基础到实战策略，全面解析媒体查询的使用方法。

一、媒体查询是什么？

媒体查询由媒体类型和一个或多个条件表达式组成。当条件满足时，内部的 CSS 规则生效。

核心语法：

@media not|only mediatype and (expression) { /* 条件满足时应用的 CSS */ }

示例：

/* 当视口宽度 ≤ 600px 时，背景变为浅蓝色 */ @media (max-width: 600px) { body { background-color: lightblue; } }

二、媒体类型（Media Types）

媒体类型用于指定样式适用的设备类别。常见取值：

/* 打印时隐藏导航栏 */ @media print { .navbar { display: none; } }

注意：早期还有handheld、tv等，但现代实践中几乎只用screen、print和all。

三、媒体特性（Media Features）

媒体特性描述设备的特定能力，最常用的是视口尺寸和方向。

3.1 常用媒体特性