horshoo
horshoo
发布于 2周前

微信小程序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导入