WXSS 与 CSS 的区别

问题

小程序的 WXSS 和 CSS 有哪些不一样的地方？

解答

WXSS（WeiXin Style Sheets）是微信小程序的样式语言，基于 CSS 扩展而来，但有一些重要差异。

1. 新增 rpx 单位

rpx（responsive pixel）是小程序特有的响应式单位，会根据屏幕宽度自动换算。

/* 规定屏幕宽度为 750rpx */
/* iPhone6 屏幕宽度 375px，1rpx = 0.5px */

.container {
  width: 750rpx;    /* 占满屏幕宽度 */
  height: 200rpx;   /* 自适应高度 */
  font-size: 32rpx; /* 自适应字号 */
}

/* CSS 中需要媒体查询实现响应式 */
.container {
  width: 100%;
  height: 100px;
}

2. 样式导入方式

/* WXSS 使用 @import 导入外部样式 */
@import "common.wxss";
@import "./components/button.wxss";

.page {
  background: #fff;
}

3. 选择器限制

/* ✅ WXSS 支持的选择器 */
.class {}           /* 类选择器 */
#id {}              /* ID 选择器 */
element {}          /* 元素选择器 */
element, element {} /* 并集选择器 */
::after {}          /* 伪元素 */
::before {}         /* 伪元素 */

/* ❌ WXSS 不支持的选择器 */
* {}                /* 通配符选择器 */
div > p {}          /* 子代选择器（部分版本不支持） */
div + p {}          /* 相邻兄弟选择器 */
[type="text"] {}    /* 属性选择器（部分限制） */

4. 不支持的 CSS 特性

/* ❌ 不支持本地资源路径 */
.bg {
  /* 错误写法 */
  background-image: url('/images/bg.png');
  
  /* 正确写法：使用网络图片或 base64 */
  background-image: url('https://example.com/bg.png');
  background-image: url('data:image/png;base64,...');
}

5. 组件样式隔离

// 组件的 js 文件
Component({
  options: {
    // 样式隔离选项
    styleIsolation: 'isolated'  // 默认值，完全隔离
    // 'apply-shared' - 页面样式影响组件
    // 'shared' - 样式互相影响
  }
})

/* 组件 wxss - 默认不受页面样式影响 */
.title {
  color: red;
}

/* 页面中同名类不会影响组件内部 */

6. 全局与局部样式

project/
├── app.wxss        /* 全局样式，作用于所有页面 */
├── pages/
│   ├── index/
│   │   └── index.wxss   /* 局部样式，仅作用于当前页面 */
│   └── list/
│       └── list.wxss

/* app.wxss - 全局样式 */
page {
  font-size: 28rpx;
  color: #333;
}

/* index.wxss - 局部样式会覆盖全局样式 */
page {
  background: #f5f5f5;
}

关键点

• rpx 单位：小程序特有，750rpx = 屏幕宽度，自动适配不同设备
• 选择器受限：不支持通配符 *，部分高级选择器受限
• 本地资源限制：背景图不支持本地路径，需用网络地址或 base64
• 样式隔离：组件样式默认隔离，可通过 styleIsolation 配置
• 作用域：app.wxss 全局生效，页面 wxss 仅当前页面生效