小程序 WXSS 与 CSS 的区别

问题

小程序的 WXSS 样式语言与标准 CSS 有哪些区别？

解答

WXSS（WeiXin Style Sheets）是小程序的样式语言，在 CSS 基础上做了扩展和限制。

背景图片限制

WXSS 中的背景图片只能使用外链地址，不支持本地图片路径：

/* ✓ 正确：使用外链 */
.container {
  background-image: url('https://example.com/image.png');
}

/* ✗ 错误：不支持本地路径 */
.container {
  background-image: url('../../images/bg.png');
}

如需使用本地图片，可以用 <image> 组件或将图片转为 base64。

样式导入

使用 @import 导入外联样式文件时，必须使用相对路径：

/* 在 app.wxss 或页面 wxss 中 */
@import './common.wxss';
@import '../../styles/base.wxss';

响应式单位 rpx

WXSS 提供了 rpx（responsive pixel）单位，可根据屏幕宽度自适应：

.box {
  width: 750rpx;  /* 在所有设备上都占满屏幕宽度 */
  height: 200rpx;
  font-size: 28rpx;
}

规定屏幕宽度为 750rpx，在 iPhone6 上 1rpx = 0.5px，会根据设备自动换算。

关键点

• 背景图片只能用外链，不支持本地路径
• @import 导入样式文件使用相对路径
• 新增 rpx 响应式单位，屏幕宽度固定为 750rpx
• rpx 会根据设备屏幕宽度自动换算，实现跨设备适配