推荐统一用em单位定义media query断点，因其基于根字体大小、不受缩放干扰且兼容ie9+；需实测换算（如480px≈30em），避免px硬编码，并优先使用min-width链式覆盖。
Media Query断点命名要不要用px单位？
Sass里写响应式库，断点单位选px还是em或rem，直接决定后续维护成本。主流设备DPR和缩放行为差异大，px在高DPR屏上会触发错误断点（比如iPhone Safari把480px媒体查询当成物理像素处理，实际逻辑像素只有375）。推荐统一用em：它基于根元素字体大小，不受缩放干扰，且兼容IE9+。但注意em值需换算——480px对应30em（假设根字号16px），别硬套px / 16公式，要实测浏览器渲染结果。
断点变量定义建议：
$breakpoint-xs: 20em; // ~320px $breakpoint-sm: 30em; // ~480px $breakpoint-md: 48em; // ~768px $breakpoint-lg: 64em; // ~1024px $breakpoint-xl: 80em; // ~1280px避免用
max-width做断点上限，优先用min-width链式覆盖，减少样式层叠冲突。
如何避免Sass @media嵌套导致的CSS重复输出？
Sass的@media嵌套本身不产生重复CSS，但多人协作时容易误用@extend或@include混用，导致相同断点内生成多份规则。典型现象是编译后CSS里出现几十行重复的@media (min-width: 48em) { ... }块。
关键约束：
- 所有断点逻辑必须封装进
mixin，禁止在选择器内部直接写@media -
@include调用断点mixin时，参数必须是预定义变量（如$breakpoint-md），禁用字面量数字 - 避免在
@mixin里调用另一个含@media的@mixin，会触发嵌套展开爆炸
@mixin for-md-up {
@media (min-width: $breakpoint-md) {
@content;
}
}
.card {
padding: 1rem;
@include for-md-up {
padding: 1.5rem;
}
}
Sass中怎么处理iOS Safari的viewport缩放bug？
iOS Safari在横屏切换时可能忽略viewport的width=device-width，导致max-width断点失效。这不是Sass能直接修复的问题，但可通过Sass生成针对性补丁。
实际方案：
- 为iOS设备单独加
orientation媒体查询，用screen and (orientation: landscape)兜底 - 在Sass中用
feature-exists检测orientation支持（仅限Dart Sass 1.30+） - 对
landscape状态下的断点做微调：比如$breakpoint-lg在横屏时临时+2em
-webkit-device-pixel-ratio，它在iOS 13+已不可靠；也不要试图用@supports (width: min(100vw, 100vh))判断，Sass编译期无法执行运行时检测。
跨平台断点库要不要支持CSS自定义属性？
纯Sass断点库默认不生成CSS变量，但现代项目常需动态修改断点（比如主题切换时调整--breakpoint-md）。强行用Sass生成CSS变量会破坏原生@media能力——因为@media (min-width: var(--breakpoint-md))在所有浏览器都不被支持。
折中方案：
- 保留Sass变量作为源数据，同时导出一份
:root作用域的CSS变量副本（仅用于JS读取，非媒体查询） - 用
@if判断Sass版本：Dart Sass支持meta.module-variables()，可自动同步变量值到CSS变量 - 禁止在
@media中引用var()，所有断点计算必须在编译期完成
postcss-custom-media）时，Sass层的@mixin和PostCSS的@custom-media会冲突，必须约定只用其中一种机制。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
