CSS媒体查询是响应式设计核心，通过@media规则根据设备特性如屏幕宽度、方向等应用不同样式；常用特性包括width、height、orientation、aspect-ratio等；典型断点设置覆盖手机、平板、桌面及大屏设备；支持and、not、only组合条件；推荐移动端优先原则，先定义小屏样式，再用min-width逐步增强大屏显示效果。

CSS媒体查询（Media Queries）是响应式设计的核心工具，它允许我们根据设备的特性（如屏幕宽度、高度、方向、分辨率等）来应用不同的样式规则。通过媒体查询，网页可以在不同设备上（手机、平板、桌面电脑）呈现出最佳的视觉效果。

基本语法结构

媒体查询使用 @media 规则包裹CSS样式，并指定一个或多个条件。当条件满足时，内部的样式才会生效。

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

这段代码表示：在屏幕设备上，当视口宽度小于或等于768px时，body的字体大小设为14px。

常用媒体特性

媒体查询支持多种特性来判断设备环境，最常用的包括：

• width / height：视口的宽度和高度，可搭配 min- 和 max- 使用（如 min-width, max-height）
• orientation：设备方向，值为 portrait（竖屏）或 landscape（横屏）
• aspect-ratio：宽高比，例如 16/9
• resolution：设备分辨率，常用于区分高清屏（如 print and (min-resolution: 300dpi)）
• device-width：设备屏幕的物理宽度（不推荐广泛使用，因兼容性问题）

常见断点设置

响应式设计中通常会设定几个关键断点来适配主流设备：

/* 手机（默认样式） */
.container {
  width: 100%;
}
/ 平板及以上 /
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/ 桌面设备 /
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}
/ 大屏幕 /
@media (min-width: 1200px) {
.container {
width: 1200px;
}
}

这些断点可根据项目需求调整，关键是确保内容在各种尺寸下都清晰可读。

结合多个条件

可以使用 and、not、only 来组合更复杂的查询。

@media screen and (max-width: 767px) and (orientation: landscape) {
  nav {
    display: none;
  }
}

使用 not 可以排除某种情况，only 主要用于防止旧浏览器解析媒体查询。

移动端优先原则

现代响应式设计推荐“移动端优先”策略：先写适用于小屏幕的样式，再通过 min-width 逐步增强大屏样式。

这种方式有利于性能优化，因为大多数用户访问来自移动设备，且避免了不必要的样式覆盖。

基本上就这些，掌握好断点设置和常用特性，就能灵活控制页面在各种设备上的表现。