1. WXSS(WeiXin Style Sheets) 是一套样式语言,用于描述WXML的组件样式,WXSS具有CSS大部分特性,并在CSS基础上做了一些扩充和修改

选择器

常用选择器如下表:

选择器 示例 说明
.class .container 选择所有class = “container” 的组件
#id #id 选择 id = “#id” 的组件
element view 选择所有view组件
element,elememt view,text 选择所有view组件和所有text组件
::after view::after 在view组件内的后面插入内容
::before view::before 在view组件内的前面插入内容

尺寸单位

微信小程序在WXSS中加入了新的尺寸单位rpx(responsive pixel,响应式像素),为了方便计算rpx单位规定了任何手机屏幕的宽度为750rpx(逻辑像素),下面列举不同手机的rpx与px的换算方式

设备 屏幕宽度(px) rpx换算px(屏幕宽度/750) px换算rpx(750/屏幕宽度)
iPhone 5 320 1 rpx ≈ 0.42px 1 px ≈ 2.34rpx
iPhone 6 375 1 rpx ≈ 0.5px 1 px ≈ 2rpx
iPhone 6 Plus 414 1 rpx ≈ 0.552px 1 px ≈ 1.81rpx