微信小程序样式怎么写？WXSS的rpx自适应与样式隔离咋辨不串Web CSS？
微信小程序样式写在 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}。
相关阅读
推荐阅读
-
-
飞机行李限重怎么算不踩廉航差异坑，国内经济舱20
搜飞机行李限重别只背20公斤一个数——民航局给的是基准框架，真正卡你的是 航司差异化规则 + 国内计重 国际计件双体系 + 全服务vs低更多
2026-08-28 13:40:56
-
-
2013家庭喜剧与欢喜来逗阵暂名及祖海 《好运
搜亲家好运来别默认成祖海春晚歌、别当二人转小帽、也别当婚宴祝酒词——正典有三条互不打通的出处，认错场景直接串档。更多
2026-08-28 13:40:55
-
-
谁是世界上最萌的人怎么答不踩主观串票坑，国际最
搜谁是世界上最萌的人别当科学设问硬答一个名字——萌本身就是主观审美，不存在客观测量仪，正经答案只在 评选场景 里成立：二次元走萌更多
2026-08-28 13:40:54
-
-
删除垃圾怎么清不踩误删系统坑，Windows临时文件
搜删除垃圾别直接右键全选C盘狂删——那是系统盘，乱删直接蓝屏进不去桌面。电脑、手机、云端各有各的垃圾路径，认错层级等于亲手给机器埋更多
2026-08-28 13:40:53
-
-
超级传播者名词解释怎么答不踩定义串写坑，传染病
搜超级传播者名词解释别只背传染很多人五个字——这是传染病学里钉死的专业术语，认错概念直接答题扣分。正典定义：在传染病暴发中，少数感更多
2026-08-28 13:40:09
-
-
巴哈大百科是什么，是巴哈姆特Wiki协作攻略库还是
搜巴哈大百科别默认成巴哈姆特全站别名——正典是 巴哈姆特电玩资讯站(gamer com tw，1996年建站，台湾最大华文ACG社群之一) 于 2006更多
2026-08-28 13:40:52
-
-
液晶显示器字体模糊怎么调不踩非原生分辨率坑，原
液晶屏字体发虚别先骂面板坏——LCD OLED是固定像素栅格，九成模糊是系统设置、线材或缩放没对齐，真硬件故障反而最少。认错病灶会越调越花更多
2026-08-28 13:40:20
-
-
Mandy什么意思，是Amanda昵称还是Barry Manilow
搜Mandy什么意思别只翻词典给一句曼迪——这词在英文语境里至少挂三条链，认错场景直接答串。更多
2026-08-28 13:38:49
财经热图
-
理财
-
-
- 智通财经APP讯，龙湖集团(00960)发布截至2026年6月30日止6个月业绩，该
-
- 首套房公积金利率下调原来贷款也下调吗首套房公积金利率下调原来...
-
- 政府回购商品房意味着什么政府收购商品房的首要目的是稳定市场。...
-
- 把自己房子卖了再买算首套房吗买过一套房卖了再买算首套房。简单...
-
- 买房交首付注意事项有哪些1、核实开发商五证。在交首付时，需要先...
-
- 房屋契税征收比例契税税率的缴纳一般分为以下几种情况：1、面积小...
-
- 房山区住建委近日发布《房山区2022年第二批毕业大学生对接保障性...
