wxss是微信小程序中的樣式語言,類似于web開發中的css。wxss和css的語法相似,但也有一些不同:
/* wxss語法示例 */ .page { background-color: #ffffff; display: flex; flex-direction: column; } .text { color: #333333; font-size: 28rpx; } /* css語法示例 */ .page { background-color: #ffffff; display: flex; flex-direction: column; } .text { color: #333333; font-size: 28px; }
wxss使用rpx作為單位,而css使用px。這是因為小程序的屏幕大小不同,使用rpx可以方便地適配不同的屏幕大小。此外,wxss還有一些自己的特殊規則和局限:
/* wxss特殊規則示例 */ /* 可以使用import導入其他wxss文件 */ @import "common.wxss"; /* 可以使用全局樣式規則 */ :global .text { color: #333333; } /* wxss局限 */ /* 不能使用通配符選擇器 */ /* 不能使用后代選擇器 */ /* 不能使用屬性選擇器 */ /* 不能使用偽類 */ /* 不能使用繼承 */ /* 不能使用浮動 */ /* 不能使用定位 */
雖然wxss有一些局限,但在微信小程序的開發中它還是非常有用的。可以用wxss為小程序界面添加樣式,讓界面更美觀、易用。wxss與wxml結合使用,為微信小程序的開發帶來了便利。