wxss和css的区别

目录

1. 语法差异

2. 尺寸单位

3. 样式导入

WXSS 示例代码：

CSS 示例代码：

4. 组件和属性的支持

总结

---

WXSS (WeiXin Style Sheets) 和 CSS (Cascading Style Sheets) 都是用于描述文档样式的语言，但它们在微信小程序和网页开发中有一些关键的区别。以下是它们之间的主要差异，并附有代码示例：

1. 语法差异

WXSS 和 CSS 的语法在大多数情况下是相似的，但 WXSS 有一些特定的扩展和限制。例如，WXSS 支持一些特定的选择器，如 .class、#id、element、element,element、:pseudo-class、::pseudo-element 等，但它不支持 CSS 的某些高级选择器，如属性选择器 [attribute]。

2. 尺寸单位

WXSS 引入了新的尺寸单位 rpx（responsive pixel），它可以根据屏幕宽度进行自适应。在宽度为 750rpx 的屏幕下，1rpx 等于 1个物理像素。而在其他屏幕下，rpx 会根据屏幕宽度进行等比缩放。CSS 则使用传统的像素（px）、百分比（%）、em、rem 等单位。