W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
ACSS 是一套樣式語(yǔ)言,用于描述 AXML 的組件樣式,決定 AXML 的組件的顯示效果。
為適應(yīng)廣大前端開(kāi)發(fā)者,ACSS 和 CSS 規(guī)則完全一致,100% 可以用。同時(shí)為更適合開(kāi)發(fā)小程序,對(duì) CSS 進(jìn)行了擴(kuò)充,ACSS 支持 px,rpx,vh,vw 等單位。
ACSS 已經(jīng)幫開(kāi)發(fā)者做了不同手機(jī)端的樣式兼容性處理。
rpx(responsive pixel)可以根據(jù)屏幕寬度進(jìn)行自適應(yīng),規(guī)定屏幕寬為 750rpx。以 Apple iPhone6 為例,屏幕寬度為 375px,共有 750 個(gè)物理像素,則 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素。
設(shè)備 | rpx 換算 px(屏幕寬度 / 750) | px 換算 rpx(750 / 屏幕寬度) |
---|---|---|
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
使用 @import
語(yǔ)句可以導(dǎo)入外聯(lián)樣式表,@import
后需要加上外聯(lián)樣式表相對(duì)路徑,用;
表示結(jié)束。
示例代碼:
/** button.acss **/
.sm-button {
padding: 5px;
}
/** app.acss **/
@import "./button.acss";
.md-button {
padding: 15px;
}
導(dǎo)入路徑支持從 node_modules 目錄載入第三方模塊,例如 page.acss:
@import "./button.acss"; /*相對(duì)路徑*/
@import "/button.acss"; /*項(xiàng)目絕對(duì)路徑*/
@import "third-party/page.acss"; /*第三方 npm 包路徑*/
組件上支持使用 style
、class
屬性來(lái)控制樣式。
用于接收動(dòng)態(tài)樣式,樣式在運(yùn)行時(shí)會(huì)進(jìn)行解析。行內(nèi)樣式不支持!important
優(yōu)先級(jí)規(guī)則。
<view style="color:{{color}};" />
用于接收靜態(tài)樣式,屬性值是樣式規(guī)則中類(lèi)選擇器名(樣式類(lèi)名)的集合,樣式類(lèi)名不需要帶上.
,多個(gè)類(lèi)名間以空格分隔。請(qǐng)靜態(tài)樣式寫(xiě)進(jìn) class 中,避免將靜態(tài)樣式寫(xiě)進(jìn) style 中,以免影響渲染速度。
<view class="my-awesome-view" />
同 CSS3 保持一致。
注意:
.a-
, .am-
開(kāi)頭的類(lèi)選擇器為系統(tǒng)組件占用,不可使用。ACSS 文件里的本地資源引用請(qǐng)使用絕對(duì)路徑的方式,不支持相對(duì)路徑引用。例如:
/* 支持 */
background-image: url('/images/ant.png');
/* 不支持 */
background-image: url('./images/ant.png');
A:請(qǐng)開(kāi)發(fā)者自行通過(guò)名空間處理樣式隔離。
A:添加一個(gè)絕對(duì)定位就可以了,不添加的話,會(huì)根據(jù)您的頁(yè)面的內(nèi)容去自適應(yīng)的。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: