PbootBiz是独立维护的PbootCMS第三方资源与工具站,与官方无隶属关系;CMS版本、授权政策及公告请以官方信息为准。

RPX尺寸

小程序手册 / RPX尺寸

PbootCMS小程序开发手册
已同步至本站后台 2026-08-24 4 阅读 0 点赞 整理自cnsbq博客

rpx尺寸

在WXSS中,引入了rpx(responsive pixel)尺寸单位

引用新尺寸单位的目的是,适配不同宽度的屏幕,开发起来更简单。

小程序编译后,rpx会做一次px换算。换算是以375个物理像素为基准,也就是在一个宽度为375物理像素的屏幕下,1rpx = 1px。

举个例子:iPhone6屏幕宽度为375px,共750个物理像素,那么1rpx = 375 / 750 px = 0.5px。

设备rpx换算px(屏幕宽度/750)px换算rpx(750/屏幕宽度)
iphone51rpx = 0.42px1px = 2.34rpx
iphone61rpx = 0.5px1px = 2rpx
iphone6 plus1rpx = 0.552px1px = 1.81rpx

WXSS介绍

完全遵循CSS语法,单位这点比CSS要高级,即rpx单位。

在CSS中,开发者可以这样引用另一个样式文件:@import url('./test_0.css')

内联样式

<view style="color: red; font-size: 48rpx"></view>

动态更新内联样式

<!--

{

eleColor: 'red',

eleFontsize: '48rpx'

}

-->

<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

选择器优先级

权重越高越优先。在优先级相同的情况下,后设置的样式优先级高于先设置的样式。

官方样式库下载

本文发布于 2026-08-24,整理自 cnsbq博客小程序手册,若有内容错误或已失效,请在下方留言或联系我们
打赏