可复用断点映射必须用scss map定义，如$breakpoints: ('touch-min': 480px, 'hover-ok': 1024px)，配合@mixin for-screen($bp)生成min-width媒体查询；@media print须物理隔离，严禁混入断点系统。
@media screen 的断点封装完全可行，但必须和 @media print 严格分开——后者不能参与任何“动态断点生成”逻辑。
怎么定义可复用的断点映射变量
SCSS 封装响应式查询的核心是把屏幕尺寸范围抽象成键值对，后续所有 @mixin 都基于它驱动。关键不是“多酷”，而是“改一处，全项目同步更新”。
-
$breakpoints必须用map而非 list：list 无法按名引用，map-get($breakpoints, 'desktop')才能稳定取值 - 每个断点建议只存
min-width（主流做法），避免max-width引发边界重叠或遗漏；例如'tablet': 768px表示“≥768px 时生效”，不写上限 - 别硬套“手机/平板/桌面”这种模糊词，用设备能力命名更可靠：
'touch-min': 480px、'hover-ok': 1024px，语义更直接
怎么写一个真正可用的响应式 mixin
目标是调用一次就产出合法、无冗余、可读性强的 CSS 媒体查询块，而不是堆砌嵌套逻辑。
- 基础版只需支持单断点：
@mixin for-screen($bp) { @media (min-width: map-get($breakpoints, $bp)) { @content; } } - 如果要支持区间（如仅在 tablet 尺寸生效），用
map-get取出两个值后拼接：@media (min-width: $min) and (max-width: $max)，但注意$max应设为$min - 1px避免和下一个断点冲突 - 禁止在 mixin 内部做
@if $bp == 'all'这类分支——它会让编译结果膨胀且难以调试；真要全断点覆盖，用@each在调用处展开
为什么不能把 print 当作断点塞进同一套系统
这是最常被误用的设计陷阱。@media print 和 @media screen 根本不是同一维度的概念，强行统一会导致编译出无效 CSS。
- 浏览器会直接忽略
@media (min-width: 768px) and print这种语法——print是媒体类型，不是特征表达式 - SCSS 的
@mixin可以包裹@media print { ... }，但它的作用只是代码复用，不是“条件生成”；传参如@mixin for-print('hide-links')是错的，'hide-links'不是断点，是行为描述 - 真正该做的是物理隔离：单独建
print.scss，只放@media print { ... }块，并用<link rel="stylesheet" href="print.css" media="print">引入，不混入主样式流
断点封装的价值不在“炫技”，而在可控与可维护。一旦开始往 mixin 里塞 @if 嵌套、动态 key 拼接、运行时计算，就离 CSS 实际生效越来越远——毕竟最终起作用的，永远是浏览器解析后的那几行静态 @media 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
