viewport标签缺失或错误导致@media失效，正确写法是且必须置于最顶部，二者缺一不可，否则页面按980px渲染、断点不触发。
没加 <meta name="viewport"> 标签，@media 就基本无效——这是 90% 的移动端响应式失效根源。
viewport meta 标签必须写对
很多开发者复制了 <meta name="viewport" content="width=device-width, initial-scale=1.0">，但漏掉关键参数或拼写错误。安卓 WebView、微信内置浏览器、iOS Safari 都会因此把页面当桌面渲染，max-width: 768px 永远不触发。
-
width=device-width缺失 → 手机强制以 980px 宽度计算视口，媒体查询条件永远不满足 -
initial-scale=1.0缺失 → 页面可能被缩放，导致 1px 在不同设备上对应不同物理像素，断点错位 -
user-scalable=no不推荐加 —— 破坏可访问性，且 iOS Safari 16+ 已禁用该行为，反而让部分表单无法放大查看
优先用 min-width 而不是 max-width
在精确宽度（如 768px）下，max-width: 768px 和 min-width: 768px 同时匹配，CSS 层叠顺序决定谁生效，行为不可控。
- 主流框架（Bootstrap、Tailwind）统一用
min-width，是因为它天然支持“默认样式 + 增量增强”，减少覆盖逻辑 - 断点值建议按内容定，而非设备型号：常见取值为
576px（小屏手机）、768px（平板竖屏）、992px（宽屏平板/窄桌面）、1200px（标准桌面） - 不要写成
@media (max-width: 767px)去重置桌面样式——易遗漏属性、增加冗余代码，且难以扩展
媒体查询只是开关，真正起作用的是内部布局机制
只改 font-size 或 margin 的像素值，解决不了根本问题。媒体查询是开关，真正起作用的是内部的布局机制。
- 用
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))实现列数自动调整，比单纯改width更适应不同视口 - 图片需配合
max-width: 100%+height: auto，否则媒体查询生效后仍会溢出 - 字体建议用
rem或clamp()，避免在断点间出现突兀缩放
别只盯着屏幕宽度，用户偏好也要响应
现代响应式不只是适配屏幕尺寸，还要响应用户偏好。这些媒体特性在 Safari 14+、Chrome 87+、Firefox 97+ 已稳定支持，但常被遗漏。
-
@media (prefers-color-scheme: dark)可切换整套配色，比 JS 检测更轻量、更早生效 -
@media (prefers-reduced-motion: reduce)应用于transition和animation，避免触发眩晕症用户不适 -
@media (orientation: landscape)在横屏时调整主内容区域比例，尤其对视频、地图类组件很实用
最容易被跳过的环节是：没验证真实设备上的视口宽度（比如用 Chrome DevTools 的“Device Metrics”显示的是模拟值，不是真实 window.innerWidth）。断点再准，如果 viewport 错了，就全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
