viewport meta 标签必须正确写在 head 中，否则@media规则在手机上基本不生效；width=device-width和initial-scale=1.0缺一不可，且不能加user-scalable=no或maximum-scale=1.0。
没写 <meta name="viewport" content="width=device-width, initial-scale=1.0">，@media 规则在手机上基本不生效——不是 CSS 写错了，是渲染视口根本没对。
viewport meta 标签必须写对，且必须放在
这是所有媒体查询起效的硬性前提。漏掉、写错位置、或加了 user-scalable=no、maximum-scale=1.0 都会导致样式“看起来没反应”。
-
width=device-width告诉浏览器用设备物理宽度做视口基准，不是默认的 980px 桌面宽度 -
initial-scale=1.0确保页面以 1:1 比例渲染，否则缩放逻辑错乱，max-width: 768px就永远匹配不上 - 微信 iOS 客户端对这个标签解析更严格，
initial-scale缺失时双击放大直接失效 - 不要在 CSS 里试图用
@media覆盖 viewport 行为——它俩不在同一层，CSS 无法干预渲染计算
@media screen 比 @media 更稳妥
不加 screen 不会语法报错，但媒体类型默认是 all，可能在打印预览、语音阅读器甚至某些 Electron 渲染环境下意外触发样式，导致调试时“明明写了却没生效”。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 旧版 Safari 对
@media all and (min-width: 768px)支持不完整，显式写成@media screen and (min-width: 768px)兼容性更好（IE9+） - 如果真要适配打印样式，得单独写
@media print，不能和屏幕样式混在一起 - 常见错误：H5 页面在微信内嵌页里样式失效，第一反应该查是否漏了
screen关键字
断点别抄设备尺寸，盯住内容自然断裂点
@media (max-width: 768px) 不代表“适配 iPad”，只表示“视口宽度 ≤ 768px 时应用这些样式”。真实折行点往往不是整数，比如导航文字在 685px 才挤成两行，卡片在 623px 才开始换行。
- 打开 Chrome DevTools 的 Device Toolbar，拖动宽度滑块，实时观察布局何时“开始难看”
- 记下实际断裂像素值（如 623px、892px），再向上取整为 640px、900px 等易维护值
- 全局断点控制在 3–4 个：480px（窄屏）、768px（竖屏临界）、1024px（小桌面）、1200px（宽屏）已覆盖 90% 场景
- 避免同时用
(max-width: 767px)和(min-width: 768px)，在 767.5px（如缩放 110% 的 iPad）下会留白失效
移动优先 + min-width 递进比 max-width 套娃更可控
基础样式（小屏）直接写在媒体查询外面，大屏增强用 @media screen and (min-width: 768px) 逐级覆盖。这样逻辑线性、调试清晰，也天然规避了层叠顺序混乱的问题。
- 例如：
.box { flex: 1 1 100%; }是默认行为；@media screen and (min-width: 768px) { .box { flex: 1 1 45%; } }是增强 - 混用
max-width和min-width容易导致某段宽度区间无样式匹配，尤其在高 DPI 设备缩放后 - rem 基准别在
:root里硬编码font-size: 16px，而应配合@media分段动态设（或用clamp(14px, 2.5vw, 18px)替代多层查询，前提是不用兼容 IE）
真正容易被忽略的是：媒体查询生效与否，90% 取决于 viewport 标签是否正确，而不是断点数值或语法写法。很多“响应式失败”的案例，翻来覆去调 CSS，其实只要补上那行 <meta> 就好了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
