在微信小程序開發中,樣式文件使用的是wxss文件,和傳統的css文件有一些不同之處。
首先,wxss是wxss獨有的一些選擇器,例如page表示頁面,view表示視圖。同時,wxss文件中的單位不是像素,而是rpx(responsive pixel),這是一個自適應的單位,可以根據不同的設備屏幕進行自動換算。
其次,wxss中提供了一些特殊的樣式規則,例如使用-webkit-inner-spin-button可以禁止輸入框的微調按鈕,使用-webkit-box-orient: vertical可以使得一個容器內的元素豎直排列。
/* 禁用輸入框的微調按鈕 */ input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* 將一個容器內的元素豎直排列 */ .container { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; }
最后,由于微信小程序的安全機制,wxss的樣式表不能直接引入外部資源,需要使用@import語句來導入。
/* 導入公共樣式表 */ @import "common.wxss";
綜上所述,wxss和css的不同之處在于選擇器、單位、樣式規則和資源導入方式等方面,這些差異需要開發者在使用時加以注意。
上一篇word鏈接css樣式表
下一篇web頁面css樣式文檔