對(duì)于css不熟悉的Android程序員來說，開發(fā)微信小程序面臨的一個(gè)比較困難的問題就是界面的排版了。微信小程序的排版就跟wxml和wxss有關(guān)了，它們兩者相當(dāng)于android的布局文件，其中wxml指定了界面的框架結(jié)構(gòu)，而wxss指定了界面的框架及元素的顯示樣式。

一、wxml

界面結(jié)構(gòu)wxmL比較容易理解，主要是由八大類基礎(chǔ)組件構(gòu)成：

二、wxss

wxml理解起來容易，但光搭好了框架，并不能達(dá)到我們想要的界面效果，這就需要用到wxss樣式了。

wxss樣式?jīng)Q定了組件應(yīng)該如何顯示，并在css的基礎(chǔ)上做了一些功能擴(kuò)展，主要包括：

1.尺寸單位

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。一般以iphone6屏幕做為視覺設(shè)計(jì)標(biāo)準(zhǔn)。

rpx 與 px單位換算如下：

2.樣式導(dǎo)入

可以使用@import語句來導(dǎo)入外聯(lián)樣式表，其后面跟需要導(dǎo)入外聯(lián)樣式表的相對(duì)路徑，并以分號(hào)結(jié)束。

例如：

/** other.wxss **/

.appText{

margin:10px;

}

/** app.wxss **/

@import "other.wxss";

.content_text:{

margin:15px;

}

app.wxss是全局樣式，作用于每一個(gè)頁面，而page下的每一個(gè)的wxss文件只作用于當(dāng)前頁面，并對(duì)全局樣式中的相同屬性會(huì)覆蓋。