wxss是小程序提供的一套样式语言,用于描述组件样式。wxss具备了css的大部分特性。并且对css进行了扩展,新增了rpx作为尺寸单位。
rpx响应式像素(根据屏幕宽度的不同,1rpx在不同平台下描述了不同的px值)
微信官方规定,所有设备的屏幕宽度都是750rpx。由此规定可以在不同平台下得到rpx与px之间的换算公式。例如:iphone6屏幕宽度375px。由rpx规定可得在iphone6平台下,1px等于2rpx。
未来使用rpx作为尺寸单位来定义组件的宽搞,可以根据屏幕分辨率进行自适应。
| 设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
本文介绍微信小程序中的wxss样式语言,重点讲解了rpx单位的作用,以及如何根据不同设备进行换算,推荐iPhone6作为设计标准。
&spm=1001.2101.3001.5002&articleId=121753865&d=1&t=3&u=32588cd7b83e4f67a86527d86d1c00a4)
2128

被折叠的 条评论
为什么被折叠?



