WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些擴(kuò)充和修改。
新增了尺寸單位。在寫 CSS 樣式時,開發(fā)者需要考慮到手機(jī)設(shè)備的屏幕會有不同的寬度和設(shè)備像素比,采用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ,開發(fā)者可以免去換算的煩惱,只要交給小程序底層來換算即可,由于換算采用的浮點(diǎn)數(shù)運(yùn)算,所以運(yùn)算結(jié)果會和預(yù)期結(jié)果有一點(diǎn)點(diǎn)偏差。
提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同,你可以寫一個 app.wxss 作為全局樣式,會作用于當(dāng)前小程序的所有頁面,局部頁面樣式 page.wxss 僅對當(dāng)前頁面生效。
此外 WXSS 僅支持部分 CSS 選擇器
更詳細(xì)的文檔可以參考 WXSS 。
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
官方文檔包含了樣式導(dǎo)入、內(nèi)聯(lián)樣式和選擇器, 微信開發(fā)者需要看看, ****在這里分享自己開發(fā)中的覺得蠻實(shí)用的點(diǎn)。
自適應(yīng)尺寸單位 rpx
rpx(responsive pixel): 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為 750rpx。如在 iPhone6 上,屏幕寬度為 375px,共有 750 個物理像素,則 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素。
rpx, 微信自定義出來的單位, 實(shí)際應(yīng)用中非常好用的, 因?yàn)榭梢圆挥美頃煌謾C(jī)的機(jī)型, 有時定 width 100% 的時候,可以直接定 750rpx。
內(nèi)聯(lián)樣式的動態(tài)轉(zhuǎn)換
靜態(tài)樣式寫好了,有時一些場景想要 , 根據(jù)不同的場景而設(shè)定不同的樣式, 這樣可以在 wxml 定義變量, 在 js 里面制定不同的樣式 , 這個在工作場景非常實(shí)用。
<view style="color:{{color}};" />
偽選擇器
剛接觸樣式的時候, 很容易忽略了樣式的偽元素, 但是它們用起來可以很爽的。譬如::after 、::before
舉例兩個場景, 1、在一個 view 后面放一個箭頭
使用::after
.arrow::after {
這里有一個垂直居中的小技巧, 是 top: 50% 再用 margin-top 減去 height 的一半, 這里-3px;
2、在一些文字前面放一個豎
使用::before
.sessionHeader:before {
橋智科技:科技賦能夢想!專注廣州、深圳和惠州小程序定制開發(fā)、APP 應(yīng)用定制開發(fā)、網(wǎng)站開發(fā)、區(qū)塊鏈錢包開發(fā)!