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%;
}
<p>/<em> 平板及以上 </em>/
@media (min-width: 768px) {
.container {
width: 750px;
}
}</p><p>/<em> 桌面设备 </em>/
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}</p><p>/<em> 大屏幕 </em>/
@media (min-width: 1200px) {
.container {
width: 1200px;
}
}</p>这些断点可根据项目需求调整，关键是确保内容在各种尺寸下都清晰可读。
结合多个条件
可以使用 and、not、only 来组合更复杂的查询。
示例：仅在横屏手机上生效
@media screen and (max-width: 767px) and (orientation: landscape) {
nav {
display: none;
}
}
使用 not 可以排除某种情况，only 主要用于防止旧浏览器解析媒体查询。
移动端优先原则
现代响应式设计推荐“移动端优先”策略：先写适用于小屏幕的样式，再通过 min-width 逐步增强大屏样式。
这种方式有利于性能优化，因为大多数用户访问来自移动设备，且避免了不必要的样式覆盖。
基本上就这些，掌握好断点设置和常用特性，就能灵活控制页面在各种设备上的表现。
