該系列主要針對微信小程式UI的設計。

既然是UI設計，當然主要設計在（頁面描述檔案）.wxml和（頁面樣式檔案/樣式語言）.wxss。

                                     weixin markup language                                          weixin style sheet

一、開始設計前，我們需要知道小程式UI設計的尺寸單位相關問題。

css中有px、cm、mm、in、%等，小程式則加了rpx、rem，建議儘量使用這2種，人以後基本都用rpx。為什麼呢？！

因為不同手機螢幕的寬度解析度不一樣，導致不同手機如果用px寫死畫素點會不能相容所有手機，於是為了螢幕寬度自適應，規定螢幕寬慰750rpx。這樣的話，如iphone6，寬度為375px，則1rpx=0.5px=1畫素。

.wxml
<view >
畫素自適應
</view>
<view class='px'></view>
<view class='rpx'></view>

.wxss
.px{
  width: 50px;
  height: 100px;
  background-color: red;
}
.rpx{
  width: 50rpx;
  height: 100rpx;
  background-color:black;
}

顯示效果：（可以看到px比rpx大2倍）

rem（root em）：同樣規定螢幕寬度為20rem，則1rem=（750/20）rpx，自己可以試試。

二、樣式的匯入方法

/** common.wxss **/
.a{
padding:50rpx;
}

/** index.wxss **/
@import "common.wxss";

.b{
padding:100rpx;
}

index.wxml可以使用 a ，b來修飾元件。

這是該設計UI系列注意的點。