uniapp中less编译后平台样式不一致，根本原因是单位未统一转换、条件编译位置错误及postcss配置缺失：less仅生成css，需靠postcss-pxtorem等插件将px转为rpx/upx，且条件编译必须包裹具体css声明而非mixin定义。
Less编译后平台样式不一致，本质是单位和条件逻辑没对齐
UniApp里用Less本身没问题，但Less变量、嵌套和mixin不会自动做平台适配——它只管生成CSS，不管rpx、upx或条件编译。所以你在Less里写width: 100px，编译出来还是100px，而微信小程序需要100rpx，H5可能要100vw，结果就是各端表现分裂。
Less里不能直接写rpx/upx，得靠PostCSS插件转
Less文件本身不识别upx单位，必须靠构建链路里的PostCSS插件（如postcss-pxtorem或postcss-plugin-uni-app）做单位转换。但这个转换只对.less里写的px生效，且依赖配置是否匹配目标平台。
- 检查
vue.config.js中css.loaderOptions.postcss.plugins是否启用对应插件，并确认rootValue设为750（适配750设计稿） - Less里所有尺寸必须写
px，不能写rpx或upx——否则PostCSS跳过处理 - 如果用了
@media或@supports，注意小程序不支持部分媒体查询语法，会被静默忽略 - 变量定义如
@gap: 20px;可以，但别在变量里拼单位：@gap: 20 + rpx;会报错或失效
Less中条件编译要写在CSS规则内，不能包在mixin外
很多人把/* #ifdef MP-WEIXIN */写在Less的.mixin()定义外面，结果整个mixin被H5编译器删掉，小程序反而拿不到。条件编译指令必须包裹具体CSS声明，且紧贴选择器或属性。
- ✅ 正确写法：
/* #ifdef MP-WEIXIN */ .container { padding: 10rpx; } /* #endif */ - ❌ 错误写法：
/* #ifdef MP-WEIXIN */ .mixin() { padding: 10rpx; } /* #endif */ .demo { .mixin(); }——mixin定义被剔除，调用失效 - Less嵌套中用
::v-deep(.target)时，括号不能省：::v-deep(.target){ color: red; }，写成::v-deep .target在小程序里大概率不生效
iOS端样式错位常因WKWebView对Flex/Grid的解析偏差
Android WebView和iOS WKWebView对flex-shrink、align-self甚至gap的支持不一致。Less里哪怕写对了，渲染结果也可能不同。这不是Less的问题，而是底层引擎差异。
- 避免用
flex: 1撑满容器，改用flex: 0 0 auto+ 显式width/height - 不用
gap，改用margin控制子项间距（iOS旧版WKWebView不支持gap） - 字体相关属性加
-webkit-font-smoothing: antialiased;，缓解iOS字体发虚或偏移 - 真机调试时，用Safari远程调试iOS页面，看Computed Styles里实际生效的值，别信模拟器
Less只是预处理器，它不解决跨端问题；真正起作用的是单位选择、条件编译位置、PostCSS配置这三者的咬合。漏掉任意一环，样式就会在某个平台突然“失重”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
