前言

今天一起来看一下微信小程序中控制样式的文件，一起看一看它与css有哪些区别以及有哪些新的功能~

---

一、wxss

1. 什么是wxss?

• WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式
• WXSS 用来决定 WXML 的组件应该怎么显示

2. 和css的关系

• WXSS 具有 CSS 大部分特性，为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改
• 与 CSS 相比，WXSS 扩展的特性有
  • rpx 尺寸单位
  • @import 样式导入

3. 什么是rpx及其实现原理

• 什么是rpx？ rpx（responsive pixel） 是微信小程序独有的，用来解决屏幕适配的尺寸单位

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

  • 在较小的设备上，1rpx 所代表的宽度较小

  • 在较大的设备上，1rpx 所代表的宽度较大

  • 小程序在不同的设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而显示屏幕适配

4. rpx与px换算关系

• rpx 与 px 之间的换算

  • 以 iPhone6 为例，iPhone6 的屏幕宽度为 375px ，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素

  • 也就是 1rpx = 0.5px = 1 物理像素

  设备	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上，

​ 如果要绘制宽100px，高20px的盒子，换算成rpx单位，

​ 宽高分别为 200rpx 和 40rpx

• rpx和iphone6设计稿的关系 官方建议： 开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。 如果要根据 iPhone6 的设计稿，绘制小程序页面，可以直接把单位从 px 替换为 rpx 。 例如，假设 iPhone6 设计稿上，要绘制一个 宽高为 200px 的盒子，换算为 rpx 为 200rpx

5. @import 样式导入

• 什么是样式导入？ 使用 @import 语句可以导入外联样式表 语法格式：@import "wxss 样式表文件的相对路径";

• 语法格式 @import后跟需要导入的外联样式表的相对路径，用;表示语句结束 @import "wxss 样式表文件的相对路径"

6. 全局样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面

7. 局部样式

• 在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器
• 注意：当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式效果！

---

总结

Desire has no rest.