HTML5中@media是CSS3媒体查询语法，用于根据视口宽度、分辨率等设备特性动态应用样式；常用min-width断点实现移动优先响应式布局，并需配合viewport元标签生效。
在 HTML5 中，@media 是 CSS3 提供的媒体查询语法，用于根据设备特性（如视口宽度、高度、方向、分辨率等）动态应用不同样式。最常用的是按屏幕宽度做响应式布局，让网页在手机、平板、桌面等设备上都能良好显示。
基础写法：用 min-width 和 max-width 控制断点
媒体查询的核心是设定“断点”（breakpoint），即触发样式的临界宽度值。推荐使用 min-width（移动优先）方式，从窄屏开始逐步增强：
- 先写默认样式（适配小屏幕，如手机）
- 再用
@media (min-width: 768px)覆盖中屏（如平板） - 接着用
@media (min-width: 1024px)覆盖大屏（如桌面）
示例：
/* 默认：手机样式 */
.container { width: 100%; padding: 10px; }
nav ul { flex-direction: column; }
<p>/<em> 平板及以上 </em>/
@media (min-width: 768px) {
.container { width: 750px; margin: 0 auto; }
nav ul { flex-direction: row; }
}</p><p>/<em> 桌面及以上 </em>/
@media (min-width: 1024px) {
.container { width: 980px; }
}</p>常见断点参考（单位用 px 或 rem）
断点不是固定标准，应根据设计稿和内容流动需求调整。以下是较通用的范围（基于主流设备视口）：
立即学习“前端免费学习笔记（深入）”；
-
手机：
@media (max-width: 767px) -
平板竖屏：
@media (min-width: 768px) and (max-width: 1023px) -
桌面：
@media (min-width: 1024px) -
大屏/高清屏：
@media (min-width: 1440px)或结合resolution: 2dppx
注意：避免为每种设备单独写断点，优先按内容“撑开”或“换行”的实际需要来设。
配合 viewport meta 标签才能生效
HTML 文件 <head> 中必须添加正确的 viewport 声明，否则移动端浏览器可能忽略媒体查询或错误缩放：
这个标签告诉浏览器：视口宽度 = 设备物理宽度，初始缩放为 1。没有它，@media 在 iOS Safari 或安卓 Chrome 上很可能不按预期工作。
进阶技巧：用 prefers-reduced-motion 或 prefers-color-scheme
现代浏览器支持更多用户偏好查询，提升可访问性与体验：
- 减少动画：
@media (prefers-reduced-motion: reduce)→ 可关闭过渡动画 - 深色模式：
@media (prefers-color-scheme: dark)→ 切换背景/文字色 - 横竖屏：
@media (orientation: landscape)→ 针对横屏优化布局
这些查询可单独使用，也可组合（用 and 连接），例如：@media (min-width: 768px) and (prefers-color-scheme: dark)。
