HTML5 媒体查询是实现响应式布局的核心技术，需配合 viewport 标签，采用 min-width 移动优先写法，设置 480px、768px、1025px 等断点，并可结合 orientation 检测方向。
如果您希望网页在不同尺寸的移动设备上正确显示，HTML5 中的媒体查询是实现响应式布局的核心技术。以下是 HTML5 媒体查询在移动端适配中的具体语法与断点设置方法：
一、使用 @media 规则定义视口适配条件
媒体查询通过 @media 规则检测设备的视口宽度、高度、方向等特征，并据此应用对应的 CSS 样式。必须配合 viewport meta 标签 才能确保移动端 浏览器 正确解析视口尺寸。
1、在 HTML 文档的 中添加 viewport 元标签：
2、在 CSS 文件或
立即学习 “ 前端免费学习笔记（深入）”；
3、确保 CSS 选择器权重合理，避免被更高优先级样式覆盖。
二、设置常用移动端断点值
断点是媒体查询中用于区分设备尺寸的关键阈值。主流框架（如 Bootstrap）和实际项目中普遍采用基于物理像素密度与典型设备宽度的经验值，而非绝对设备型号。
1、小屏手机断点：@media (max-width: 480px) —— 适配 iPhone SE、旧款 Android 小屏机型
2、中屏手机断点：@media (min-width: 481px) and (max-width: 767px) —— 覆盖多数 4.7–5.5 英寸手机竖屏状态
3、平板 横屏断点：@media (min-width: 768px) and (max-width: 1024px) —— 匹配 iPad、Surface 等平板设备常见分辨率
4、桌面与大屏混合断点：@media (min-width: 1025px) —— 作为桌面端基础样式起始点
三、采用 min-width 为主流的移动优先写法
移动优先策略要求基础 CSS 针对最小屏幕编写，再通过递增的 min-width 媒体查询逐步增强大屏样式。该方式减少重复声明，提升可维护性，且天然兼容新设备。
1、先定义无媒体查询的基础样式，例如：.button {padding: 8px 12px; font-size: 14px;}
2、随后添加增强规则：@media (min-width: 768px) {.button { padding: 10px 16px; font-size: 16px;} }
3、避免同时使用 max-width 和 min-width 混合嵌套，防止逻辑冲突与调试困难。
四、利用 orientation 检测设备方向
某些布局需根据用户旋转设备动态调整，orientation 媒体特性可识别 portrait（竖屏）或 landscape（横屏）状态，适用于全屏视频、表单页等场景。
1、竖屏专用样式：@media (orientation: portrait) {.hero { height: 80vh;} }
2、横屏专用样式：@media (orientation: landscape) {.hero { height: 100vh;} }
3、注意：orientation 在部分 安卓 浏览器中可能延迟触发，不应作为关键功能的唯一判断依据。
五、使用 width 与 device-width 的区别处理
width 指当前视口（viewport）的 CSS 像素宽度，受缩放和 viewport 设置影响；device-width 指设备物理屏幕的原始像素宽度，不随缩放变化。现代响应式开发推荐优先使用 width。
1、推荐写法（响应视口变化）：@media (max-width: 600px)
2、慎用写法（依赖设备固有分辨率）：@media (max-device-width: 600px) —— 在高 DPI 屏幕（如 iPhone Retina）下易失效
3、验证方式：在 Chrome DevTools 中切换设备模拟器并实时观察 computed 样式中的 width 值变化。
