postcss 无法一套源码导出多套 css，需用多组配置+多次构建；浏览器不会自动切换多套css，须服务端注入或js动态加载；推荐用clamp()+vw混合方案替代。
PostCSS 本身不支持“一套源码导出多套 CSS”
这是最常被误解的一点：postcss-px-to-viewport 或 postcss-pxtorem 这类插件，只在构建时做**单次单位转换**，输出一份 CSS。它没有“按屏幕宽度分支编译”的能力。想靠改一个 PostCSS 配置就生成 index-1280.css、index-1920.css 两份文件？做不到。
真正可行的方案是：用多组 PostCSS 配置 + 多次构建
核心思路是把不同分辨率当作不同“构建目标”，每个目标跑一次 PostCSS 流程。比如你要适配 1280px 和 1920px 两种设计基准：
- 准备两个配置文件：
postcss.config.1280.js和postcss.config.1920.js - 每个配置里传入不同的
viewportWidth（如 1280 / 1920）或rootValue（如 128 / 192） - 在
package.json里定义两条构建命令："build:1280": "cross-env POSTCSS_CONFIG=postcss.config.1280.js vue-cli-service build"，同理加build:1920 - 构建产物会分别输出到
dist/css/1280/和dist/css/1920/（需配合vue.config.js的outputDir动态设置）
关键陷阱：别指望 CSS 自动“感知”屏幕宽度并切换
即使你生成了多套 CSS，浏览器也不会自动加载对应版本——media 属性只控制是否应用某条规则，不是加载资源。常见错误写法：
<link rel="stylesheet" href="index.css" media="screen and (max-width: 1280px)"><link rel="stylesheet" href="index-1920.css" media="screen and (min-width: 1281px)">
这看似合理，但实际会同时下载两份 CSS（现代浏览器 prefetch 行为），且 1920px 版本里的 100vw 在 1280px 屏幕上依然按 1280 计算，完全失去意义。真正可控的做法只有两种：
- 服务端根据
User-Agent或 JS 检测的window.screen.width注入对应<link>（注意：必须内联 JS，在里执行，否则 FOUC） - 前端 JS 加载后动态
fetch对应 CSS 并注入<style></style>（牺牲首屏性能，适合非关键样式）
更现实的选择：用 clamp() + vw 混合替代多套 CSS
对大多数项目，硬切多套 CSS 是过度工程。真正需要的是“同一份 CSS 在不同视口下表现合理”。例如字体：
font-size: clamp(14px, 2.5vw, 18px);
它比单纯 font-size: 4.267vw 更健壮——小屏不缩到看不见，大屏不撑爆布局。配合 @media 控制断点处的 layout 变化（比如从 flex-column 切到 grid），比维护三套 CSS 文件成本低得多，也更容易调试。
多套 CSS 的复杂点不在配置，而在版本同步、缓存失效策略、CDN 分发路径管理——这些细节一旦漏掉，上线后就不是“适配不好”，而是“样式错乱不可回滚”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
