關于.acss文(wén)件(jiàn)

在視(shì)頻(pín)中已經說(shuō)過了(le)™φ，小(xiǎo)程序的(de)設計(jì)思想和(hé)原生(shēn£λg)app的(de)設計(jì)思想頗為(wèi)相(xiàng)似，基δ♣本的(de)應用(yòng)單元為(wèi)頁面。當然☆↕≥對(duì)于一(yī)個(gè)頁面來(lái)說(shuō)每一(y¶σī)個(gè)元素的(de)放(fàng)置位置在哪兒(ér)以及顯示成什(shén♦•¶)麽樣子(zǐ)這(zhè)個(gè)是(shì)由樣式來(lái)決定的(de)。我們知(zhī)道(dào)在web開(kāi)發中樣式是(s☆§≈hì)在css文(wén)件(jiàn)中規定的(d€€₽™e)，叫做(zuò)層疊樣式表 (Cascading Style Sheets)。其實在APP×β中樣式的(de)約束也(yě)是(shì)使用(yòng)css，在支付寶小(xiǎo)程序中•$≥∏也(yě)是(shì)使用(yòng)css不(bù)過文(wén)件(★©jiàn)的(de)後綴是(shì).acss而且對(duì)css3進行(xíng)了(l÷α™↓e)擴充而已。

CSS3是(shì)CSS技(jì)術(shù)的(de)升級版本，CSS3語言開(kāi)≥®發是(shì)朝著(zhe)模塊化(huà)發展的(de)。以÷<∞前的(de)規範作(zuò)為(wèi)一(yī)個(gè)模塊實在是(shì)®$¶太龐大(dà)而且比較複雜(zá)，所以，把它分(fēn♥α )解為(wèi)一(yī)些(xiē)小(xiǎo)λ∏σ‌的(de)模塊，更多(duō)新的(de)模塊也(y↑‍ě)被加入進來(lái)。這(zhè)些(xiē)模塊包括： 盒子( ε✔zǐ)模型、列表模塊、超鏈接方式 、語言模塊 、背景☆→↕•和(hé)邊框 、文(wén)字特效 、多(duō)欄布局等。

那(nà)麽在支付寶小(xiǎo)程序中的(de).acss和(♦'♠←hé)微(wēi)信小(xiǎo)程序中的(de).wxcss沒有(yǒu)什(shén)麽兩樣₹≈♦☆。上(shàng)邊已經說(shuō)了(le).acss其實包含了(l→αe)css3那(nà)麽它還(hái)有(yǒu)一(yī)些(xiē)新的(de)特性是∑φ(shì)css3中不(bù)具備的(de)，讓我們一(yī)一(yī)看(kàn)看(♣•kàn)

rpx

第一(yī)次看(kàn)到(dào)這(zhè)個(gè×£)東(dōng)西(xī)也(yě)能(néng)猜‍∑到(dào)他(tā)是(shì)幹什(shén)麽用(yòng)的(de)。在css中我γ¥₽們知(zhī)道(dào)規定大(dà)小(xiǎo)一(✘Ω↑​yī)般使用(yòng)像素(px)這(zhè)個(gè♣  )單位。比如(rú)顯示生(shēng)活中我們說(shuō)房(fáng)子(zǐ)1→✘≥28㎡那(nà)這(zhè)兒(ér)的(de)單位是(shì)平方米，在開(kāi)發中★←需要(yào)更加精準的(de)大(dà)小(xiǎo)就≠♠§♣(jiù)是(shì)px像素。像素就(jiù)非常精細了(le)因為(wèi)在我們顯示屏幕Ω​<中像素是(shì)最小(xiǎo)的(de)顯示單元。這(zhè)個(gè)道(dào)理(lǐ)λ±♣如(rú)果不(bù)懂(dǒng)的(de)話(huà)就(jiù)找個(gè)LED屏幕€★ 仔細看(kàn)，LED屏幕上(shàng)一(yī)個(gè)一(yī)個(gè)的(de)發光< (guāng)二極管可(kě)以想象為(wèi)像素。

px為(wèi)單位導緻的(de)問(wèn)題

我們知(zhī)道(dào)手機(jī)屏幕有(yǒu)大(dà)有(>&∑yǒu)小(xiǎo)，就(jiù)拿(ná)iPhone來(lái)說(shuō)，iP​¥₹♣hone 6 plus比iPhone 5要(yào)大(dà)。那(nà)麽就(jiù¥γ→α)說(shuō)明(míng)plus的(de)像素比5要(‌αyào)多(duō)。對(duì)比：

iPhone 6 plus和(hé)iPhone5的(de)尺寸對(duì)比

手機(jī)	寬度	高(gāo)度
手機(jī)	寬度	高(gāo)度
iPhone 6 plus	414px	736px
iPhone 5	320px	568px

加入有(yǒu)一(yī)個(gè)160px寬度的(de)紅(hóng)色矩形在這(zhè)兩種 ÷§γ手機(jī)中的(de)位置如(rú)下(xià)：

那(nà)麽rpx的(de)特殊之處在哪兒(ér)呢(★→↓ne)？

rpx（responsive pixel）可(kě)以根據屏幕寬度進行(x≠φ♦íng)自(zì)适應。如(rú)何自(zì)适應呢(ne)？看 ÷₹∞(kàn)下(xià)邊的(de)分(fēn)析：

不(bù)管一(yī)個(gè)屏幕有(yǒu)多(duō)寬我們可(kě)以對(duì)®δ♠屏幕平均分(fēn)配吧(ba)。既然iPhone 6 plus​Ω寬度為(wèi)414px，iPhone 5的(de)寬度為(wèi)320px。如(r÷γ©∑ú)果創建一(yī)個(gè)寬度為(wèi)160px的(£δde)矩形那(nà)麽在iPhone 5 中占有(yǒu)一(yī)半的(de)寬度，但(±✘dàn)是(shì)在iPhone 6 plus中不(bù)足一(yī)半，在手機(jī→α)顯示中不(bù)是(shì)很(hěn)好(hǎo)看(kàn)​≤±。那(nà)麽我們不(bù)管屏幕多(duō)寬都(dōu)給他(tā)分(fēn)€£₩750份。那(nà)麽在iPhone 6 plus中每一(yī)份↓≠₩就(jiù)是(shì)414/750=0.552px 而對(duì)于iPhone∏<©★ 5的(de)每一(yī)份就(jiù)是(shì)320/750=0.42px。那™©→β(nà)現(xiàn)在我們規定大(dà)小(xiǎo)和(hé)位置時(shí)不(bù≠€↓)使用(yòng)px而使用(yòng)份數(shù)來(lái)φ↕∏表示如(rú)何呢(ne)？比如(rú)我們規定一(yī)個(gε™εè)紅(hóng)色的(de)矩形在iPhone 6 pluλ㮥s中占有(yǒu)375份(375x0.552=207px)，在iPhone 5中• '≥也(yě)是(shì)325份(375x0.42=157.5px)。 
再來(lái)看(kàn)看(kàn)，都(dōu)占有(yǒu)375份的(d§₽σ♣e)情況下(xià)iPhone 6 plus中的(de)寬度207px（約占有(yǒu✔'↓€)總寬度414px的(de)50%），而iPhone 5α®×中的(de)寬度157.5px（約占有(yǒu)總寬度320的♣§(de)50%）。也(yě)就(jiù)是(shì)在兩個(gè)不(bù¥£≤₹)同尺寸的(de)屏幕上(shàng)當以份數(shù)來$™∏(lái)規定是(shì)占有(yǒu)的(de)比例是(shì)差不(bù)多(duō λ×φ)的(de)。而這(zhè)個(gè)份數(shù)就(jiù)是(shì)rpx

看(kàn)下(xià)圖：

樣式導入

在模塊化(huà)開(kāi)發中我們有(yǒu)時(shí)候不(™₽&αbù)得(de)不(bù)在頁面中使用(yòng)其他(tā)的(de)第三方庫的(de)樣式，而β♦σ第三方庫的(de)樣式是(shì)保存在第三方包中的(de)，我們不(bù)可®&λ(kě)能(néng)全部複制(zhì)到(dào)我∏↑們的(de).acss文(wén)件(jiàn)中，那(nà)最好♠'∞(hǎo)的(de)辦法就(jiù)是(shì)導入了(le)。在樣★↔→式表中導入其他(tā)外(wài)聯樣式表。

@import "./button.acss";
.md-button {
  padding:15px;
}
1
2
3
4

當然仍舊(jiù)支持內(nèi)聯樣式和(hé)clas↓λ  s屬性制(zhì)定樣式類，如(rú)

<view class="my-awesome-view" />
<view class="my-awesome-view" style="color:red;" />
1
2

選擇器(qì)

選擇器(qì)和(hé)css3的(de)保持一(yī)緻。一(yī)般有(yǒu)cla±​♠πss=”test”類選擇器(qì)和(hé)id=”test”的(‌‍™de)id選擇器(qì)。當然在支付寶小(xiǎo)× ★λ程序的(de)樣式中特殊的(de)地(dì)方就(jiù)是(shì•©✔)： 
※ .a- 或者 .am-為(wèi)前綴的(de)選擇器≈φ(qì)已經被系統占用(yòng)所以不(bù)要(yào)使用(yβ•òng)； 
※ 不(bù)能(néng)使用(yòng)屬性選擇器(±$‍​qì)，例如(rú),以下(xià)寫法不(bù)被支持：

//這(zhè)種選擇器(qì)不(bù)被支持
input[name="title"]{
    color: test;
}
1
2
3
4

全局樣式與局部樣式

在項目結構講解時(shí)我們已經說(shuō)過在項目根目錄下(xià<☆≤)有(yǒu)一(yī)個(gè)app.acss文(wén)件(×♣jiàn)這(zhè)個(gè)樣式文(wén)件(jiàn)中定義的(de)樣式在任何一(yī∑©)個(gè)頁面中都(dōu)可(kě)以直接使用(yòng¶&✘↑)。

頁面容器(qì)的(de)樣式

我之前說(shuō)過小(xiǎo)程序開(kāi)發的(de)應用(y∏≥£òng)單元為(wèi)頁面。其實我們在.axml中寫的(d ♥e)頁面并不(bù)包含頁面容器(qì)，就(jiù)相(x•→iàng)當于我們做(zuò)一(yī)個(gè)頁面但(dàn)是(sh↓≤λ♥ì)body标簽不(bù)用(yòng)寫那(nà)如&ε₽(rú)果我們要(yào)改變整個(gè)頁面的(de)背景怎麽辦呢(ne)?其實有(yδ>®✔ǒu)一(yī)個(gè)固定的(de)選擇器(qì)。例如(r<>&ú)：

可(kě)以通(tōng)過 page 元素選擇器(qì)來(lái)設¶©©置頁面容器(qì)的(de)樣式，比如(rú)頁面背景色:

page {
  background-color: red;
}
1
2
3

在你(nǐ)想改變頁面容器(qì)的(de)頁面中定義該樣式也(yě)可(kě)以§₽↔，全局定義也(yě)可(kě)以，例如(rú)我想将tes±×'®t這(zhè)個(gè)頁面的(de)頁面容器(qì)背λ§∑≠景設置為(wèi)藍(lán)色，就(jiù)可(kě)以再pages目錄下(xià)的§↑(de)test目錄下(xià)找到(dào)test.acss在其中定義page的(de)樣 &<≥式

下(xià)節是(shì)視(shì)圖層講解，如(rú)果有(yǒu)σ→任何問(wèn)題可(kě)以再下(xià)方給我留言或者發郵件(jiε∑àn)到(dào)weiyongqiang@weiyongqiang.com我在收到(dào)​‍↑郵件(jiàn)後會(huì)回複。