【小程序基础】WXSS 模板样式

196 阅读1分钟

rpx

1. 什么是 rpx 尺寸单位

rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。

2. rpx 的实现原理

rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕, 在宽度上等分为 750 份(即:当前屏幕的总宽度为 750rpx)。

3. rpx 与 px 之间的单位换算

在 iPhone6 上,屏幕宽度为375px,共有 750 个物理像素,等分为 750rpx。则:
750rpx = 375px = 750 物理像素
1rpx = 0.5px = 1物理像素

设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone51rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

样式导入

1. 什么是样式导入

使用 WXSS 提供的 @import 语法,可以导入外联的样式表。

2. @import 的语法格式

@import 后跟需要导入的外联样式表的相对路径,用 ; 表示语句结束。示例如下:

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

3. 全局样式和局部样式

  1. 全局样式: 定义在 app.wxss 中的样式为全局样式,作用于每一个页面。
  2. 局部样式: 在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面。 注意: ① 当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
    ② 当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式