让 Weex UI 响应系统设置

在 Weex 开发中,px 是一个相对单位,1px 代表的宽度是设备屏幕宽度的 1 / 750(Weex 定义整个设备屏幕宽度为 750px)。通常来说,这是没有什么问题的。但是,在安卓系统中,如果修改了系统的显示大小,App 中的非 Weex UI 会根据系统设置进行调整,比如修改显示大小为小,那么 UI 元素的大小会相应缩小。然而这个时候 Weex UI 却不会发生变化,因为我们使用的单位是根据设备屏幕宽度来计算的,这会使 App 内的 UI 看起来不协调,想象一下当修改显示大小为小时,?#27809;?#20174;一个非 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 相当于在其他因素不变的情况下缩小了字体,这?#27604;?#26159;不够的。因此,我们需要通过指定元素的内边距来控制元素的大小。

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