文章目录
1 WXSS
WXSS (WeiXin Style Sheets)是一套样式语言,用于美化 WXML 的组件样式,类似于网页开发中的CSS。
2 WXSS 和 CSS 的关系
WXSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。
与 CSS 相比,WXSS 扩展的特性有:
rpx
尺寸单位@import
样式导入
3 rpx
3.1 rpx 尺寸单位
rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。
3.2 rpx 的实现原理
rpx 的实现原理:
鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕,在宽度上等分为 750 份(即:当前屏幕的总宽度为 750rpx)。
在较小的设备上,1rpx 所代表的宽度较小
在较大的设备上,1rpx 所代表的宽度较大
小程序在不同设备上运行的时候,会自动把 rpx 的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。
3.3 rpx 与 px 之间的单位换算
在 iPhone6 上,屏幕宽度为375px,共有 750 个物理像素,等分为 750rpx。
=》750rpx = 375px
=》 1rpx = 0.5px
其他设备的换算:
所以在小程序开发时,建议以 iPhone6 为标准,便于单位的换算。把对应的长宽乘 2 即可。
在 iPhone6 上如果要绘制宽100px,高20px的盒子,换算成rpx单位,宽高分别为 200rpx 和 40rpx。
更换模拟器的机型
4 样式导入
4.1 样式导入
使用 WXSS 提供的 @import
语法,可以导入外联的样式表。
4.2 @import 的语法格式
@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束。
页面结构和数据
list.wxml
<!--pages/list/list.wxml-->
<view
wx:for="{{arr}}"
wx:for-index="idx"
wx:for-item="content"
wx:key="id"
>
id: {{content.id}}
索引:{{idx}} -- 当前项:{{content.content}}
</view>
list.js
// pages/list/list.js
Page({
data: {
arr: [
{id: 1, content: 'a'},
{id: 2, content: 'b'},
{id: 3, content: 'c'},
{id: 4, content: 'd'},
{id: 5, content: 'e'}
]
}
})
外联样式表
/* common/common.wxss */
view {
margin: 10px;
background-color: cadetblue;
}
导入外部样式表
/* pages/list/list.wxss */
/* 导入外部样式 */
@import "../../common/common.wxss";
input {
border: 1px solid black;
margin: 10px;
}
5 全局样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。
list页面
取消页面之前的样式
index.wxml
不设置任何页面的样式
<!--index.wxml-->
<view>1111111111111</view>
<view>1111111111111</view>
<view>1111111111111</view>
<view>1111111111111</view>
<view>1111111111111</view>
<view>1111111111111</view>
全局样式表
/**app.wxss**/
view {
margin: 10px;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
}
设置全局样式表之后页面的样式
list页面
index页面
6 局部样式
在页面对应的 .wxss 文件中定义的样式为局部样式,只作用于当前页面。
注意:
- 当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全局样式
- 当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式
权重相同,按照就近原则;权重不同,样式为权重大的样式。
权重相同,按照就近原则
全局样式
/**app.wxss**/
view {
margin: 10px;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
}
list页面的局部样式
/* pages/list/list.wxss */
view {
background-color: hotpink;
}
局部样式与全局样式,都为标签选择器,权重一样大,其中背景样式发生了冲突,按照就近原则,背景颜色按照页面的局部样式。其他样式在页面局部样式中没有设置,不发生冲突,按照全局样式。
权重不同,样式为权重大的样式
全局样式
/* app.wxss */
view {
margin: 10px;
border: 1px solid black;
background-color: greenyellow;
text-align: center;
}
view:nth-of-type(1) {
background-color: yellow;
}
list页面的局部样式
/* pages/list/list.wxss */
view {
background-color: hotpink;
}
由于view:nth-of-type(1)
加了一个伪类选择器所以权重大于全局样式前面view标签选择器,权重也大于局部样式中view标签选择器。所以第一个view的颜色为 yellow。
选择器的权重可以将鼠标悬停在选择器上查看: