讓 Weex UI 響應系統設定

在 Weex 開發中，px 是一個相對單位，1px 代表的寬度是裝置螢幕寬度的 1 / 750（Weex 定義整個裝置螢幕寬度為 750px）。通常來說，這是沒有什麼問題的。但是，在安卓系統中，如果修改了系統的顯示大小，App 中的非 Weex UI 會根據系統設定進行調整，比如修改顯示大小為小，那麼 UI 元素的大小會相應縮小。然而這個時候 Weex UI 卻不會發生變化，因為我們使用的單位是根據裝置螢幕寬度來計算的，這會使 App 內的 UI 看起來不協調，想象一下當修改顯示大小為小時，使用者從一個非 Weex UI 進入到 Weex UI 中的場景，這個時候最引人注意的就是字型大小的變化。

我們可以通過使用 wx 來作為 font-size 的單位來解決字型大小的問題。需要注意的是，儘量不要在除了 font-size 以外的 css 宣告中使用 wx。在使用 wx 作為單位時，font-size 的大小以 1 倍設計圖為標準，也就是說，如果設計圖的寬度是 375px，標註字型大小為 20px，那麼我們就應該指定 font-size 為 20 wx。如果設計圖寬度是 750px，標註字型大小為 20px，根據上面的規則可以推出 font-size 應該為 10wx。

解決了字型大小的問題之後，還有元素大小的問題。如果之前你的 UI 元素是直接指定了寬高，

.box {
  width     : 702px;
  height    : 96px;
  font-size : 16wx;
}

這會使元素空隙看起來過大，也就是說，僅僅修改 font-size 宣告的單位為 wx 相當於在其他因素不變的情況下縮小了字型，這當然是不夠的。因此，我們需要通過指定元素的內邊距來控制元素的大小。

.box {
  width          : 702px;
  font-size      : 16wx;
  padding-top    : 32px;
  padding-bottom : 32px;
}