小程序WXSS样式文件

WXSS (WeiXin Style Sheets)

 

目录

WXSS (WeiXin Style Sheets)

一、全局样式与局部样式

二、WXSS 是一种用来描述 WXML 的组件样式的语言。

三、WXSS 的特性：

1、尺寸单位

2、样式导入

 

---

一、全局样式与局部样式

全局样式——定义在 app.wxss 中；

局部样式——定义在 page 的 wxss 文件中，会覆盖 全局样式 中相同的选择器。

 

二、WXSS 是一种用来描述 WXML 的组件样式的语言。

 

三、WXSS 的特性：

• 具有 CSS 大部分特性；
• 在CSS的基础上，扩展的特性包括：
  1. 尺寸单位
  2. 样式导入

 

---

1、尺寸单位

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx；
• 如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素；
• 1rpx = 0.5px = 1物理像素。
• 750rpx = 20rem，所以1rem = 18.75 px。与 rem 相比，rpx 更精细。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

 

---

2、样式导入

• 使用@import语句可以导入外联样式表；
• @import后跟需要导入的外联样式表的相对路径；
• 用“;”标点符号表示语句结束。

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}

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