跨端CSS不一致的根本原因是变量未统一管控，必须将颜色、间距、断点等收口至单一variables.less文件，各端入口按顺序导入且仅允许覆盖一次，否则因Less作用域隔离导致iOS/Android/H5表现错乱。
跨端CSS表现不一致，根本不是设备差异导致的，而是变量没管住——所有颜色、间距、断点必须收口到一份 variables.less，且每个项目只允许在入口文件里覆盖一次，否则必然出现iOS按钮蓝、Android按钮灰、H5又变回默认色。
为什么 @import "variables.less" 在不同端会失效
Less 变量作用域不跨编译上下文，Webpack 构建时如果多个入口（如 app.web.less、app.weex.less、app.mini.less）各自独立编译，哪怕都写了 @import "variables.less"，它们引用的其实是三份隔离的变量副本。更糟的是，某些构建工具（如 Taro 的 less-loader 配置）会把 miniapp 入口单独抽成一个 chunk，variables.less 被重复解析，!default 失效。
常见错误现象：
-
@primary-color在 Web 端生效，小程序里还是默认值 - 本地开发一切正常，CI 构建后 H5 页面断点错乱
- 修改了
@breakpoint-mobile，但只有 button 组件响应，nav 组件没变
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有跨端变量声明必须集中在一个文件，比如
src/styles/core/variables.less，且每行末尾加!default - 各端入口文件（如
app.web.less）必须按顺序写：@import "../core/variables.less"; @import "../themes/web-theme.less"; @import "../components/button.less"; - 禁用
less-loader的modifyVars做跨端变量注入——它只影响顶层入口，不穿透@import链
@breakpoint-mobile 和 @container-width-mobile 必须成对管理
移动端和桌面端的布局逻辑差异不只是媒体查询，容器宽度、字体缩放、触摸目标尺寸都得联动。只改断点变量而不动容器变量，会导致“媒体查询已触发，但容器还撑满全屏”这种视觉断裂。
使用场景：
- 小屏下
.container宽度应为100%或92vw，而非固定1200px - 平板断点切换时，字体大小需从
@font-size-lg降到@font-size-md，不能靠 JS 动态改rem根字号
参数差异：
-
@breakpoint-mobile: 480px是媒体查询边界，@container-width-mobile: 92vw是布局约束，二者语义不同，不可混用 - 别在变量里写
@container-width-mobile: calc(100vw - 2 * @spacing-lg)——Less 不支持运行时计算，编译报错 - 推荐组合：
@breakpoint-mobile: 480px;+@container-max-widths: { mobile: 92vw, tablet: 720px, desktop: 1200px };，再用 mixin 解构
如何让 @font-size-base 在 iOS/Android/H5 表现一致
直接设 @font-size-base: 16px 在 iOS 上会被 Safari 强制放大，在 Android WebView 里可能被系统字体设置干扰，在小程序里又受宿主限制。真正可控的是相对单位 + 根元素控制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
rem：定义@font-size-base: 1rem;，然后在各端 HTML 的上通过 JS 或内联 style 设置font-size，例如 iOS 设为16px，Android 设为15.5px，H5 按视口动态算 - 避免在 Less 中硬编码像素值做适配，比如
@font-size-sm: 12px—— 这个值在 iPhone SE 上实际渲染可能比设计稿大 20% - 触摸目标最小尺寸（44×44px）必须用
px显式声明，不能依赖 rem 缩放，否则在高 DPR 屏幕上点击区域过小
性能提示：不要为每个端写一套字体变量文件（ios-fonts.less、android-fonts.less），那会让变量表膨胀、覆盖链失控；一套变量 + 各端根字号 JS 控制才是轻量解法。
跨项目复用变量时，@import (reference) 的陷阱
很多人以为用 @import (reference) "variables.less" 就能安全复用，结果发现变量还是不生效。根本原因是 (reference) 只阻止 CSS 输出，**不改变作用域规则**——它仍然要求变量在当前编译上下文中被定义过。
容易踩的坑：
- 公共库中
@import (reference) "variables.less"，但业务项目没在入口显式@import同一份文件，变量就不可见 - 路径别名（如
@/styles/variables）在 Less 里不被识别，@import (reference) "@/styles/variables"会直接报File not found - Webpack 的
lessOptions.paths必须指向真实磁盘路径，比如path.resolve(__dirname, 'node_modules/@myorg/ui/src/styles')，不能只写node_modules/@myorg/ui
正确做法：
- 所有跨端项目共用的变量，放在独立 npm 包（如
@myorg/tokens）中，包内只含variables.less和mixins.less - 业务项目
less-loader配置中加入该包路径：paths: [path.resolve(__dirname, 'node_modules/@myorg/tokens/src')] - 组件文件开头写：
@import "variables.less";（不加(reference)），确保变量注入到当前作用域
最常被忽略的一点：跨端变量同步不是靠“自动注入”，而是靠“显式导入 + 严格顺序 + 单点覆盖”。一旦漏掉任意一环，表现不一致就注定发生。
