微信小程序開發(fā)|樣式文件 wxss

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 后面放一個箭頭

image

使用::after

.arrow::after {

這里有一個垂直居中的小技巧, 是 top: 50% 再用 margin-top 減去 height 的一半, 這里-3px;

2、在一些文字前面放一個豎

image

使用::before

.sessionHeader:before {

橋智科技:科技賦能夢想!專注廣州、深圳和惠州小程序定制開發(fā)、APP 應(yīng)用定制開發(fā)、網(wǎng)站開發(fā)、區(qū)塊鏈錢包開發(fā)!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容