小程序样式

发表于 | 分类于
字数统计: 355 | 阅读时长 ≈ 1

WXSS 样式

小程序通过 WXSS 文件来控制页面样式，WXSS 具有 CSS 大部分特性并对其进行了扩充和修改，扩充的特性如下：

尺寸单位

增加了新单位 rpx(responsive pixel) ：可以根据屏幕宽度自适应，规定的屏幕宽度为 750rpx；如在 iPhone6 上，屏幕宽度为 375px 即 750 个物理像素，则 750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

设备 rpx 换算 px（屏幕宽度 / 750） px 换算 rpx（750 / 屏幕宽度）
iPhone 5 1rpx = 0.42px 1px = 2.34rpx
iPhone 6 1rpx = 0.5px 1px = 2rpx
iPhone 7 1rpx = 0.552px 1px = 1.81rpx

样式导入

通过 @import 导入外联样式表，必须是相对路径，以 ; 号结束

1
2
3
4
5
6
7
8
9
10
/** common.wxss **/
.small-p {
    padding: 5px;
}

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

内联样式

在页面中可以 style 或 class 控制页面元素样式

应尽量避免使用 style 内联样式，以免影响渲染速度

class 名不允许包含 .

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

<view class="normal_view" />

选择器

目前支持的选择器有：

选择器 样例
类选择器 .class
ID 选择器 ‘#ID’
元素选择器 Element，Element Element
伪元素选择器 Element:before，Element:after

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每个页面中；Page 中的 wxss 文件为局部样式，只作用于当前页面，并会覆盖全局样式