media queries 在 vscode 中需手动配置代码片段，emmet 仅支持基础展开，无法处理语义化断点、边界精度（如479.98px）、嵌套缩进及多环境适配；应为 css/scss 单独配置 snippet，并避免与 rem 耦合。
Media Queries 在 VSCode 里不能靠“自动识别场景”智能生成，必须手动配置代码片段（snippets）——否则每次写 @media screen and (max-width: 768px) 都得手敲，还容易漏括号、错空格、混淆 min-width 和 max-width 的边界逻辑。
为什么直接用 Emmet 写不了靠谱的媒体查询
Emmet 支持 @m 展开成 @media，但仅此而已。它不区分设备断点、不补全括号内常用条件、不处理嵌套时的缩进对齐，更不会帮你规避 max-width: 500px 实际覆盖 499.99px 而非 500px 这类常见误解。
真实项目中你常要写的是带语义的断点组，比如：
-
mobile-only：仅在 ≤480px 生效（注意不是max-width: 480px，而是max-width: 479.98px才严格排除 480px 设备） -
tablet-up：≥768px 开始生效（min-width: 768px） -
desktop-only：768px–1023px 区间（min-width: 768pxandmax-width: 1023px）
这些没法靠 Emmet 推导，只能靠预置 snippet 精确控制。
如何为 CSS/SCSS 文件配置响应式断点 snippet
打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），输入 Configure User Snippets，选择 css.json（或 scss.json）。在 JSON 中添加类似以下结构：
{
"media-mobile-only": {
"prefix": "mmob",
"body": [
"@media screen and (max-width: ${1:479.98}px) {",
"\t$0",
"}"
],
"description": "Mobile only (strict ≤479.98px)"
},
"media-tablet-up": {
"prefix": "mtab",
"body": [
"@media screen and (min-width: ${1:768}px) {",
"\t$0",
"}"
],
"description": "Tablet and up"
}
}
关键细节：
- 占位符
${1:768}允许你快速修改断点值，$0是最终光标位置 - 用
479.98px而非480px是为了避开某些安卓浏览器对整数像素的四舍五入渲染误差 - 不要把
@media套在@layer或嵌套规则里再配 snippet——CSS 原生不支持那样写，VSCode 不会校验语法，但浏览器会静默忽略
在 Vue/Svelte 等单文件组件里怎么用
单文件组件中的 <style></style> 块默认走 CSS 语言模式，所以只要你在 css.json 里配了，.vue 或 .svelte 文件里输入 mmob + Tab 就能触发。
但注意两个限制：
- 如果用了
lang="scss"，必须同时在scss.json里重复配置相同 snippet，否则不生效 - 若启用了
style: scoped，@media规则内部的选择器无需加:deep()或::v-deep—— 它们只影响嵌套选择器，不影响媒体查询本身的作用域 - 不要试图在
<script setup></script>里用这些 snippet，JS/TS 语言模式下它们根本不会出现
别把 rem 单位和媒体查询混在同一 snippet 里
有人想做一个“rem + media”一体化模板，比如输入 resp 就生成 html { font-size: 16px; } @media (max-width: 768px) { html { font-size: 14px; } }。这看似省事，实际埋雷：
- 根字号缩放是全局行为，和具体组件的媒体查询逻辑无关，强行耦合会导致复用困难
- 不同项目用的 base font-size 不同（16px / 100% / 62.5%），硬编码进 snippet 会污染后续项目
- 真正需要响应式字体的场景，应该用
clamp()或 JS 动态计算，而不是靠媒体查询切固定值
断点归断点，字号归字号——分开配、分开用，出问题才好定位。
