移动端微前端CSS隔离不能靠strictStyleIsolation自动生效，必须主应用统一控制viewport、rem根字号、字体路径及媒体查询，子应用禁用所有全局样式注入与适配脚本，并对UI库类名和变量双重命名空间化。
移动端微前端的 CSS 隔离不能靠 strictStyleIsolation 或 styledIsolation 自动生效——它不处理 @import、link 外链、CSS-in-JS 生成的样式，也不改写选择器，更不兼容移动端常见的 viewport、rem、1px 边框 等适配逻辑。
移动端 rem/vw 适配样式必须全局统一，不能由子应用各自控制
子应用若在自己的 main.ts 或 index.html 中动态注入 font-size 计算脚本（如 lib-flexible 或 postcss-pxtorem 输出的根字号逻辑），会导致：主应用设置 html { font-size: 37.5px }，子应用又设成 32px，最终所有 rem 单位渲染错乱。真实现象是按钮文字忽大忽小、间距压缩或撑开。
- 主应用统一提供适配逻辑：只在主应用入口执行一次
setRootFontSize()，并通过window.__MICRO_APP_ENV__或自定义事件通知子应用“适配已就绪” - 子应用禁用所有 rem/vw 初始化脚本：删除
import 'amfe-flexible'、移除<script src="flexible.js"></script>，不调用任何修改document.documentElement.style.fontSize的代码 - 构建时关闭 postcss 插件的 rootValue 自动推导：Vite 配置
postcss.config.js中postcss-pxtorem的rootValue必须写死为与主应用一致的数值（如37.5），不可设为function () { return 37.5 }—— 否则子应用单独运行时正常，嵌入后失效
Vite 子应用中 @import 移动端重置样式（如 normalize.css）会绕过所有隔离机制
这是最隐蔽的漏点：import 'normalize.css' 在 Vite 中走 ES 模块加载，最终被 style 标签注入 ，qiankun 的沙箱完全无法劫持该过程。结果就是子应用的 button { margin: 0 } 直接污染主应用的表单布局。
- 子应用必须删除所有
import全局 CSS 的语句，包括normalize.css、reset.css、1px.less - 主应用统一打包并注入基础样式：将移动端通用重置规则（含
box-sizing: border-box、touch-callout: none、-webkit-tap-highlight-color: transparent）编译进主应用 CSS，并确保其在所有子应用加载前就位 - 若子应用确需局部重置（如弹窗内需清除内边距），改用 scoped 写法：
，且禁止使用:global()
移动端 UI 库（如 Vant、NutUI）的类名和变量必须双重命名空间化
仅在 app.use(Vant, { classNamePrefix: 'van' }) 不够——SCSS 编译后的 .van-button 仍可能和另一个子应用的 .van-button 冲突；而 CSS 变量如 --van-primary-color 是全局注册的，加前缀无效。
- 初始化时传入唯一前缀：
app.use(Vant, { classNamePrefix: 'subapp-order-van' }) - 同步覆盖 SCSS 变量：在
vite.config.ts的css.preprocessorOptions.scss.additionalData中注入：@use "vant/theme-chalk/src/common/var" with ($van-prefix: 'subapp-order-van'); - 禁用 CSS-in-JS 动态注入：Vant 的
Dialog、Toast默认挂载到document.body，必须显式指定容器：Dialog.alert({ selector: '.subapp-order-container .van-dialog' }) - 检查构建产物：打开子应用打包后的
dist/assets/index.xxxx.css，确认所有类名（含伪元素::before）、所有@keyframes名称均已带前缀，无裸.van-出现
子应用 CSS 中的 viewport、@media 和字体声明会被主应用覆盖
子应用若在 或 CSS 文件中写 @media (max-width: 750px)，或 @font-face { src: url(xxx.woff2) }，这些规则全部进入全局作用域。主应用的 @media (max-width: 375px) 会与之叠加计算，而字体文件路径若为绝对路径（/fonts/icon.woff2），嵌入后直接 404。
- 子应用禁用所有
@media媒体查询：移动端响应式应由主应用统一通过 JS 控制容器宽度 + CSS 变量驱动，子应用只写固定断点（如width: 100%） - 字体资源路径必须相对化：Webpack 子应用设
publicPath: './'，Vite 子应用设build.base: './'，确保@font-face src: url('./fonts/icon.woff2')能正确解析 -
只能由主应用控制：子应用不得向document.head注入该标签，否则多个 viewport 定义会导致 Safari 移动端缩放异常
真正卡住移动端样式的不是选择器冲突，而是那些“看不见”的全局副作用：根字号计算时机、字体路径解析上下文、@media 规则叠加顺序、以及 UI 库对 document.body 的隐式依赖。这些点一旦漏掉一个，隔离就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
