學習微信小程序WXSS與CSS的不同

相同點

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

WXSS的補充和修改

1. 尺寸單位rpx

rpx是響應式像素。因為微信小程序不能識別rem等像素單位。不過rpx和rem很相似，可以根據(jù)屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

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

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

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

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

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

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

使用@import標識符來導入外聯(lián)樣式。@import后跟需要導入的外聯(lián)樣式表的相對路徑，用;表示語句結束。

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

Hello,world!

/** index.wxss **/

@import './assets.wxss';

.container{

color: red;

}

/**assets.wxss**/

.container{

border: 1px solid #000;

}

如果index.wxss中的container標簽設置border屬性為別的顏色，就會覆蓋assets.wxss里設置的黑色邊框。

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

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

style：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動態(tài)的樣式，在運行時會進行解析，請盡量避免將靜態(tài)的樣式寫進 style 中，以免影響渲染速度。

Hello,world!

//index.js

Page({

data:{

colorValue:'red'

}

})

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

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

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

4. 選擇器

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

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

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

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

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

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

element — 權重 1

當在一個樣式中申明了一個!important 的規(guī)則時，這個規(guī)則會覆蓋其他任何申明。因為!important 的權重是高的，所以使用時盡量小心，因為它會破壞樣式表中固有的規(guī)則。

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

/** index.wxss **/

.title{

color: red !important;

}

強制修改title里的文字顏色為紅色。