摘要：本文主要介绍了微信小程序开发中的 WXSS。WXSS 类似于网页开发中的 CSS，具有其大部分特性同时又有扩展，如 rpx 尺寸单位、@import 样式导入等。其中 rpx 是解决屏适配的独特单位，有特定实现原理和不同设备的换算方式。@import 可导入外联样式表，有明确语法格式和示例。此外还介绍了全局样式和局部样式，局部样式在冲突时可根据就近原则覆盖全局样式。总之，WXSS 在微信小程序开发中起着重要的页面美化和布局作用。

微信小程序_9_WXSS模板样式

• 一、WXSS 简介
• 二、WXSS 和 CSS 的关系
• 三、WXSS 中的 rpx
• • 1.什么是 rpx 尺寸单位
• 四、样式导入
• • 1.什么是样式导入
• 五、全局样式和局部样式
• • 1.全局样式
  • 2.局部样式
• 六、总结

一、WXSS 简介

WXSS（WeiXin Style Sheets）是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS。

二、WXSS 和 CSS 的关系

WXSS 具有 CSS 大部分特性，同时还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。扩展的特性有：

• rpx 尺寸单位。
• @import 样式导入。
• CSS 通用的选择器在 WXSS 中也通用，以及通用的样式规则。

三、WXSS 中的 rpx

1.什么是 rpx 尺寸单位

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

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