微信小程序（三、wxss样式）

wxss样式

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

• 新增了尺寸单位

  • WXSS在底层支持新的尺寸单位rpx，可以根据屏幕宽度进行自适应，响应式尺寸单位

  • 小程序中全屏尺寸数值是 : 750rpx （100%）

  • 与px的换算关系：

设备	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

• 提供了全局的样式和局部样式

  • 定义在app.wxss中的样式为全局样式，作用于每一个页面

  • 在page的wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器

• 此外WXSS仅支持部分CSS选择器，目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有class="intro"的组件
#id	#firstname	选择拥有id="firstname"的组件
element	view	选择所有view组件
element , element	view, checkbox	选择所有文档的view组件和所有的checkbox组件
::after	view::after	在view组件后边插入内容
::before	view::before	在view组件前边插入内容