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

一、wxml

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

關(guān)于這八大類的屬性和具體用法可參考以下參考文獻(xiàn)鏈接：

http://www.w3cschool.cn/weixinapp/itz51q8o.html

https://mp.weixin.qq.com/debug/wxadoc/dev/component/

二、wxss

wxml理解起來(lái)容易，但光搭好了框架，并不能達(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語(yǔ)句來(lái)導(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è)頁(yè)面，而page下的每一個(gè)的wxss文件只作用于當(dāng)前頁(yè)面，并對(duì)全局樣式中的相同屬性會(huì)覆蓋。

對(duì)于微信小程序wxss樣式的使用來(lái)說(shuō)，其實(shí)大部分都和css樣式一致，下面簡(jiǎn)單的進(jìn)行介紹一下：