讓 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;
}