微信小程序WXSS样式

WXSS是微信小程序专用的样式语言，用来描述WXML的组件样式。它和CSS类似，但针对小程序的场景做了扩展。WXSS主要体现在这几方面：

• 尺寸单位rpx
• 样式导入
• 内联动态样式
• 全局和局部样式

尺寸单位

WXSS引入了新的尺寸单位rpx（responsive pixel），规定所有屏幕的宽度固定为750rpx。如果直接在WXSS使用px，由于屏幕的分辨率不同就会导致px定义的元素显示不一样。使用响应单位rpx在所有屏幕上显示的比例是一样的。

如在 iPhone6 上，屏幕宽度为375px，则750rpx = 375px，1rpx = 0.5px 。

rpx与px的转换如下：

• iPhone5： 1rpx = 0.42px，1px = 2.34rpx
• iPhone6： 1rpx = 0.5px，1px = 2rpx
• iPhone6 Plus： 1rpx = 0.552px，1px = 1.81rpx

微信小程序是推荐设计实用用iPhone 6作为视觉效果。

样式导入

使用@import语句导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

内联动态样式

微信小程序建议在内联样式style上定义动态的样式，它会在运行时解析，如下：

<view style="color:{{color}};" />

对于静态样式建议定义在样式表里的class

全局和局部样式

在微信小程序里根据样式的作用范围，可以把样式分为：

• 公共样式（app.wxss）：公共样式作用域全局，对所有的页面都起效。
• 页面局部样式：与app.json注册过的页面同名且位置同级的WXSS文件。wxss里定义的样式作用于此页面。
• 其他样式：其他样式使用@import导入