微信小程序 WXSS 与 CSS 的区别

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

微信小程序的 WXSS（WeiXin Style Sheets）是用于定义小程序页面样式的语言，它在语法和功能上与传统的 CSS 有许多相似之处，但也存在一些关键的区别。这些区别主要体现在文件扩展名、尺寸单位、部分特性支持以及与小程序生态的集成等方面。本文将详细探讨 WXSS 与 CSS 的区别，并通过实际代码示例进行说明。

一、文件扩展名

（一）CSS

CSS 文件的扩展名是 .css，这是 Web 开发中用于定义 HTML 页面样式的标准文件格式。

（二）WXSS

WXSS 文件的扩展名是 .wxss，这是微信小程序中用于定义页面样式的专用文件格式。

示例：

html 复制代码

<!-- HTML 文件 -->
<link rel="stylesheet" href="style.css">

<!-- WXSS 文件 -->
/* index.wxss */

二、尺寸单位

（一）CSS

CSS 中常用的尺寸单位包括 px（像素）、em（相对单位）、rem（相对于根元素的字体大小）、%（百分比）等。

（二）WXSS

WXSS 引入了 rpx（responsive pixel）这一独特的尺寸单位，用于适配不同屏幕宽度的设备。rpx 的设计目标是让开发者能够更方便地实现响应式布局。

屏幕宽度适配 ：在微信小程序中，屏幕宽度被固定为 750rpx，无论设备的实际屏幕宽度是多少。例如，iPhone 6 的屏幕宽度为 375px，因此 1px = 2rpx。
动态适配 ：使用 rpx 可以让页面在不同设备上保持一致的布局效果，而无需手动调整样式。

示例：

css 复制代码

/* CSS 示例 */
.container {
  width: 100px;
  height: 50px;
}

/* WXSS 示例 */
.container {
  width: 375rpx; /* 占据屏幕宽度的一半 */
  height: 250rpx; /* 占据屏幕高度的一部分 */
}

三、选择器

（一）CSS

CSS 提供了丰富的选择器，包括类选择器（.）、ID 选择器（#）、标签选择器（tag）、属性选择器（[attribute]）等。

（二）WXSS

WXSS 也支持类似的选择器，但在某些方面存在限制：

类选择器 ：.class，与 CSS 相同。
ID 选择器 ：#id，与 CSS 相同。
标签选择器 ：view、text 等，与 CSS 相同。
属性选择器 ：[attribute]，与 CSS 相同。

区别：

WXSS 不支持伪类选择器（如 :hover、:active 等），因为小程序的交互方式与 Web 不同。
WXSS 不支持伪元素（如 ::before、::after 等）。

示例：

css 复制代码

/* CSS 示例 */
.container {
  background-color: blue;
}

.container:hover {
  background-color: red;
}

::before {
  content: "Hello";
}

wxss 复制代码

/* WXSS 示例 */
.container {
  background-color: blue;
}

四、部分特性支持

（一）CSS

CSS 提供了许多高级特性，如动画（@keyframes）、渐变（linear-gradient）、阴影（box-shadow）、3D 变换（transform）等。

（二）WXSS

WXSS 支持大部分 CSS3 样式，但在某些高级特性上存在限制：

动画：WXSS 支持简单的动画，但不支持 @keyframes。
渐变：WXSS 支持渐变背景。
阴影：WXSS 支持阴影效果。
3D 变换：WXSS 支持 2D 变换，但不支持 3D 变换。

示例：

css 复制代码

/* CSS 示例 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

.container {
  animation: example 2s;
  background: linear-gradient(to right, red, yellow);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  transform: rotateY(45deg);
}

wxss 复制代码

/* WXSS 示例 */
.container {
  background: linear-gradient(to right, red, yellow);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  transform: rotate(45deg);
}

五、全局样式与局部样式

（一）CSS

在 Web 开发中，全局样式通常定义在全局的 CSS 文件中，局部样式可以通过嵌入式样式或内联样式定义。

（二）WXSS

微信小程序支持全局样式和局部样式：

全局样式 ：在 app.wxss 文件中定义的样式，适用于整个小程序。
局部样式 ：在页面的 .wxss 文件中定义的样式，仅适用于当前页面。

示例：

wxss 复制代码

/* app.wxss - 全局样式 */
.global-style {
  color: blue;
}

/* index.wxss - 局部样式 */
.local-style {
  color: red;
}

六、样式表的引入

（一）CSS

在 HTML 文件中通过 <link> 标签引入 CSS 文件：

html 复制代码

<link rel="stylesheet" href="style.css">

（二）WXSS

在小程序中，样式表的引入是自动的。每个页面的 .wxss 文件会自动与对应的 .wxml 文件关联。如果需要引入其他样式文件，可以使用 @import 语句：

wxss 复制代码

@import "common.wxss";

七、总结

WXSS 和 CSS 在语法和功能上有许多相似之处，但 WXSS 是为微信小程序的开发环境量身定制的，具有以下特点：

文件扩展名 ：.wxss。
尺寸单位 ：引入了 rpx，用于响应式布局。
选择器支持：支持大部分 CSS 选择器，但不支持伪类和伪元素。
特性支持：支持大部分 CSS3 样式，但在动画和 3D 变换等高级特性上存在限制。
全局与局部样式 ：支持全局样式（app.wxss）和局部样式（页面的 .wxss 文件）。
样式表引入 ：通过 @import 语句引入其他样式文件。

理解 WXSS 与 CSS 的区别，可以帮助开发者更好地适应微信小程序的开发环境，充分利用其特性，提升开发效率和用户体验。希望本文能够帮助你更好地理解和使用 WXSS。