學(xué)習(xí)微信小程序WXSS與CSS的不同

相同點(diǎn)

width：設(shè)置元素寬度。
height：設(shè)置元素高度。
position：設(shè)置元素定位方式。
color：設(shè)置元素內(nèi)文本的顏色。
border：設(shè)置元素的邊框樣式。

WXSS的補(bǔ)充和修改

1. 尺寸單位rpx

rpx是響應(yīng)式像素。因?yàn)槲⑿判〕绦虿荒茏R(shí)別rem等像素單位。不過rpx和rem很相似，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

注：rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位?？吹絩em大家一定會(huì)想起em單位，em（font size of the element）是指相對(duì)于父元素的字體大小的單位。它們之間其實(shí)很相似，只不過一個(gè)計(jì)算的規(guī)則是依賴根元素一個(gè)是依賴父元素計(jì)算。

設(shè)備像素（device pixel）：設(shè)備能控制的屏幕顯示的最小物理單位，這些物理單位是顯示屏幕上的一個(gè)個(gè)點(diǎn)，這些點(diǎn)是固定的。

CSS像素（CSS pixels）：web編程中的邏輯像素。

PPI/DPI（pixel per inch）：每英寸擁有的像素?cái)?shù)目。數(shù)值越高代表顯示屏能以越高的密度顯示圖像。

DPR（devicepixelRatio）：手機(jī)的某一方向上設(shè)備像素和CSS像素之比。在微信開發(fā)者工具里模擬器上方切換不同設(shè)備時(shí)，就可以看到對(duì)應(yīng)的DPR數(shù)值。

2. 外聯(lián)樣式導(dǎo)入

使用@import標(biāo)識(shí)符來(lái)導(dǎo)入外聯(lián)樣式。@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(jié)束。

外聯(lián)樣式是有執(zhí)行順序的，從上到下，從左到右。

<!-- index.wxml -->

<view class="container">

Hello,world!

</view>

/** index.wxss **/

@import './assets.wxss';

.container{

color: red;

}

/**assets.wxss**/

.container{

border: 1px solid #000;

}

如果index.wxss中的container標(biāo)簽設(shè)置border屬性為別的顏色，就會(huì)覆蓋assets.wxss里設(shè)置的黑色邊框。

3. 內(nèi)聯(lián)樣式

框架組件上支持使用 style、class 屬性來(lái)控制組件的樣式。

style：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動(dòng)態(tài)的樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析，請(qǐng)盡量避免將靜態(tài)的樣式寫進(jìn) style 中，以免影響渲染速度。

<!--index.wxml-->

<view style="width:500rpx;height:30px;background-color:{{colorValue}};">

Hello,world!

</view>

//index.js

Page({

data:{

colorValue:'red'

}

})

過綁定背景顏色的值為變量，在index.js里data設(shè)置了一個(gè)colorValue值為紅色。

class：用于指定樣式規(guī)則，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。

所以一般把靜態(tài)樣式屬性寫入class中，把動(dòng)態(tài)樣式屬性寫入style。

4. 選擇器

其他還有實(shí)際測(cè)試過的nth-type-of(n)(匹配屬于父元素的特定類型的第 N 個(gè)子元素的每個(gè)元素) 等選擇器也能在微信小程序里使用，所以以實(shí)際表現(xiàn)為準(zhǔn)，官方文檔漏缺的地方可以在開發(fā)者社區(qū)反饋。

選擇器的優(yōu)先級(jí)

!important (不算做選擇器，只是提升權(quán)重) — 權(quán)重 無(wú)窮大

style (標(biāo)簽內(nèi)聯(lián)樣式) — 權(quán)重 1000

#element(id選擇器) — 權(quán)重 100

.element (class選擇器) — 權(quán)重 10

element — 權(quán)重 1

當(dāng)在一個(gè)樣式中申明了一個(gè)!important 的規(guī)則時(shí)，這個(gè)規(guī)則會(huì)覆蓋其他任何申明。因?yàn)?important 的權(quán)重是高的，所以使用時(shí)盡量小心，因?yàn)樗鼤?huì)破壞樣式表中固有的規(guī)則。

在制作小程序插件時(shí)，可以把某個(gè)功能封裝起來(lái)，做成插件分享給別人使用。而我們使用別人的插件時(shí)，想要修改插件對(duì)應(yīng)元素的樣式，除了可以在插件的代碼里修改，也可以在引入插件的外層使用!important 這個(gè)申明規(guī)則來(lái)直接修改。

/** index.wxss **/

.title{

color: red !important;

}

強(qiáng)制修改title里的文字顏色為紅色。