viewport标签缺失或错误是媒体查询失效的主因，浏览器默认以980px渲染移动端页面，导致@media断点无法触发；必须正确书写且置于head顶部，优先使用min-width断点并基于内容临界点设定值。
viewport 元标签没加，@media 就是摆设
断点不生效，八成是因为 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 没写，或者写错了。浏览器默认以约 980px 宽度渲染移动端 HTML，@media (min-width: 768px) 根本不会触发。
常见错误包括：width=320（硬编码锁死缩放）、漏掉 initial-scale=1.0（iOS Safari 可能自动缩放）、user-scalable=no（部分安卓浏览器直接忽略整个标签）。
必须确保它出现在 <head> 最顶部，且只出现一次。
@media (min-width: Npx) 是唯一靠谱写法
别用 @media (max-width: 767px)，也别混用 min-width 和 max-width。前者容易漏掉 1px 边界（尤其 DPR=2 设备），后者会让多个规则同时命中，样式互相覆盖——比如 iPad Pro 竖屏正好 768px，min-width: 769px 就完全失效。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 所有断点值必须是整数
px单位，漏写单位（如--breakpoint-md: 768）会导致后续calc()失效 - 按升序排列：
320px → 480px → 768px → 1024px，CSS 自上而下解析，后声明覆盖同优先级前声明 - 每个
@media块里只写「该区间需要变更」的属性，别重复定义字体、颜色等全局已设项
断点值不是设备参数，而是内容撑开的临界点
别抄 768px 或 1024px 这类“经典值”。iPhone SE 竖屏逻辑宽度是 375px，但你的导航栏可能在 482px 才开始换行；卡片三列布局可能在 769px 就挤成两列——这个 769px 才是你该用的断点。
真实操作方式：
- 打开 Chrome DevTools，勾选「Toggle device toolbar」，拖动宽度滑块，眼睛盯着布局哪里开始错乱
- 记下文字溢出、图片裁切、按钮重叠前的精确像素值（比如
482px，不是四舍五入成480px） - 命名用功能状态，比如
$breakpoint-nav-collapse，而不是$breakpoint-iphone-x
CSS 变量不能用在 @media 条件里
写 @media (min-width: var(--breakpoint-md)) 是无效的。浏览器会静默丢弃整条规则，DevTools 里根本看不到，也不报错。
想统一管理？可以这样：
- 在
:root里定义语义变量：--breakpoint-md: 768px - 但每个
@media还得手动抄数值：@media (min-width: 768px) - 用 Sass/Tailwind 等构建工具做变量替换是可以的，纯 CSS 场景下没有自动代入这回事
最易踩坑的是：把断点塞进 JSON 配置再构建注入——改个值就得跑一遍构建，调试时连实时预览都做不到。
