微信小程序样式怎么写？WXSS的rpx自适应与样式隔离咋辨不串Web CSS？

2026-08-28 17:29:35 华商亲子网

微信小程序样式写在 WXSS(WeiXin Style Sheets) 里，语法 90% 像 Web CSS，但跑在微信客户端渲染层，不是浏览器 DOM，所以不能直接把网页 CSS 照搬——rpx 自适应、作用域隔离、选择器砍半，这三道关不过就会遇到“iPhone 正常安卓错位”“全局样式被页面覆盖”“通配符重置无效”。

📏 rpx：750 基准是灵魂

规定屏幕宽恒等于 750rpx，iPhone 6(375px 屏)下 1rpx=0.5px，iPhone 14 Pro Max(430px 屏)下 1rpx≈0.573px，元素按 750 设计稿标注多少 px 就写多少 rpx，无需媒体查询自动适配。边框 1px、0.5px 发丝线、固定定位偏移可用 px，其余间距/字号/宽高优先 rpx，否则小屏溢出大屏留白。

🧩 作用域：全局/页面/组件三级

app.wxss 全局生效，放主题色、字体、.flex-center 工具类;

pages/xxx/xxx.wxss 仅当前页面生效，同选择器权重下页面覆盖全局;

自定义组件默认开启样式隔离(类似 Shadow DOM)，组件内样式不漏出去，外部想改要用 externalClasses 暴露入口;

优先级链：内联 style > 页面 wxss > app.wxss > 框架默认样式。

✂️ 选择器被砍过的坑

支持 .class、#id、view/text 标签、后代 .a .b、:active/:disabled 伪类、:before/:after 伪元素;不支持 * 通配符、属性选择器 [type=button]、相邻兄弟 +、通用兄弟 ~、:hover(真机无悬停)。想做全局 *{box-sizing:border-box} 重置?做不到，只能在 app.wxss 里逐个写 view,text,image{box-sizing:border-box}。