在移动设备种类繁多的今天，一套网页需要在手机、平板、笔记本、大屏显示器上都能呈现出良好的布局与可读性。CSS3 媒体查询（Media Queries）正是实现这种“一次设计，处处适应”的关键技术。它允许开发者根据设备特性（如视口宽度、屏幕分辨率、方向、色彩能力等）有条件地应用样式规则，从而构建真正的响应式网站。本文将从语法基础到实战策略，全面解析媒体查询的使用方法。一、媒体查询是什么？媒体查询由媒体类型和一个或多个条件表达式组成。当条件满足时，内部的 CSS 规则生效。核心语法：@media not|only mediatype and (expression) { /* 条件满足时应用的 CSS */ }示例：/* 当视口宽度 ≤ 600px 时，背景变为浅蓝色 */ @media (max-width: 600px) { body { background-color: lightblue; } }二、媒体类型（Media Types）媒体类型用于指定样式适用的设备类别。常见取值：值说明all所有设备（默认值，最常用）screen电脑、手机、平板等带屏幕的设备print打印预览模式或打印页面时speech屏幕阅读器等语音合成器/* 打印时隐藏导航栏 */ @media print { .navbar { display: none; } }注意：早期还有handheld、tv等，但现代实践中几乎只用screen、print和all。三、媒体特性（Media Features）媒体特性描述设备的特定能力，最常用的是视口尺寸和方向。3.1 常用媒体特性特性说明取值示例width视口宽度（包括滚动条）min-width: 768px