px断点失效主因是浏览器亚像素取整、viewport配置错误及scss媒体查询嵌套非法；em/rem可规避取整误差，但需确保根字体大小稳定且viewport正确生效。
SCSS编译后仍是标准CSS，px断点本身就会被浏览器四舍五入
SCSS只是预处理器，@media (min-width: 768px) 编译后还是原样输出。问题不在SCSS，而在浏览器对 px 单位的解析机制：Chrome、Firefox 对像素边界存在亚像素取整差异，比如视口宽度为 767.6px 时，某些内核会向下取整为 767px，导致 min-width: 768px 永远不匹配。
这不是bug，是规范行为。你用SCSS写 @media (min-width: $breakpoint-tablet)，只要 $breakpoint-tablet 最终是 768px，就逃不开这个限制。
为什么em/rem能绕过取整误差？
em 和 rem 是相对单位，浏览器计算时基于当前根字体大小（html { font-size: 16px }），但关键在于：它们的比较逻辑不依赖物理像素对齐，而是基于缩放后的计算值，天然规避了 px 的亚像素抖动。
- 把
@media (min-width: 768px)改成@media (min-width: 48em)（假设1rem = 16px） - 确保
html元素的font-size没被JS动态修改，否则1rem值漂移，断点又会错乱 - 如果项目用了
html { font-size: 62.5%; }，那1rem = 10px，此时768px → 76.8rem，不能直接套用48em
SCSS里混用px变量 + 媒体查询嵌套，反而放大问题
很多人在SCSS中这样写：
.card {
width: 100%;
@media (min-width: $lg) {
width: 500px;
}
}
这看似方便，但实际会生成非法CSS——标准CSS不允许 @media 嵌套在选择器内部，所有浏览器都会忽略该规则。真机上根本不会生效，DevTools里却可能显示“已加载”，极具误导性。
正确写法必须是顶层独立声明：
.card {
width: 100%;
}
@media (min-width: 768px) {
.card {
width: 500px;
}
}
viewport失效会让所有px断点归零
即使SCSS写得再规范，如果 <meta name="viewport"> 拼错或缺失，@media 就完全不触发。常见错误包括：
-
intial-scale=1（拼错 initial）→ iOS Safari 当作无效标签处理 - 漏掉
width=device-width→ 浏览器按桌面模式渲染，clientWidth返回980而非390 - 框架（如 Next.js）自动生成一条 viewport，你又手动加了一条，后加载的覆盖前一条，且无提示
真机调试时务必运行：console.log(document.documentElement.clientWidth)，若返回值远大于设备逻辑宽度（如 iPhone 14 Pro 应≈390），说明 viewport 没起作用，所有断点都白写。
最易被忽略的是：px 断点失效往往不是单一原因，而是 viewport 错误 + px 取整 + 媒体查询嵌套三者叠加。改 em/rem 之前，先确认 clientWidth 正确，否则换再“高级”的单位也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
