[Doc] Update about wx (#491)
diff --git a/docs/docs/components/text.md b/docs/docs/components/text.md
index d4ec54a..9e38f6a 100644
--- a/docs/docs/components/text.md
+++ b/docs/docs/components/text.md
@@ -43,6 +43,10 @@
* Support [common events](../events/common-events.html)
## Other
+
+### `wx` unit
+`font-size` and `line-height` support `wx` . For styles that should not be affected by screen width and viewPortWidth, please use `wx` as unit.
+
### Text height
The rules for computed height of text component is complicated, basically but not always, text in Weex obey the following rules in order:
1. The CSS style of `max-height`/`min-height` on your text
diff --git a/docs/docs/modules/animation.md b/docs/docs/modules/animation.md
index 76527c0..d8fe4ba 100644
--- a/docs/docs/modules/animation.md
+++ b/docs/docs/modules/animation.md
@@ -70,13 +70,13 @@
:::
#### Animated properties in styles
-* **`width`**, the `width` applied to the component after the animation finished. Set `needLayout` to true if you want the change to be persistence. The default value is `computed width`.
-* **`height`**, the `height` applied to the component after the animation finished. Set `needLayout` to true if you want the change to be persistence. The default value is `computed height`.
+* **`width`**, the `width` applied to the component after the animation finished. Set `needLayout` to true if you want the change to be persistence. The default value is `computed width`.support `wx` as unit.
+* **`height`**, the `height` applied to the component after the animation finished. Set `needLayout` to true if you want the change to be persistence. The default value is `computed height`.support `wx` as unit.
* **`backgroundColor`**, the `backgroundColor` applied to the component after the animation finished. The default value is `computed backgroundColor`.
* **`opacity`**, the `opacity` applied to the component after the animation finished. The default value is `computed opacity`.
* **`transformOrigin`**, the `transformOrigin` indicate the pivot of the element being animated. The possible values for `x-axis` are `left`/`center`/`right`/length or percent, and possible values of `y-axis` are `top`/`center`/`bottom`/ length or percent. The default value is `center center`.
* **`transform`**, transform object, which may include `rotate`, `translate`, `scale` and etc. The detail of transform is illustrated below.
- * `translate/translateX/translateY`: Specify the location which the element will be translated to.The unit is number or percent and the default value is 0.
+ * `translate/translateX/translateY`: Specify the location which the element will be translated to.The unit is number or percent and the default value is 0.support `wx` as unit.
* `rotate/rotateX/rotateY`**v0.14+**: Specify the angle of which the element will be rotated. The unit is **degree** and the default value is 0.
* `perspective`**v0.16+**: The distance between the z=0 plane and the user. Supported for **Android 4.1** and above. The unit is number and the default value is positive infinity.
* `scale/scaleX/scaleY`: Stretch or shrink the element. The unit is number and the default value is 1.
diff --git a/docs/docs/styles/common-styles.md b/docs/docs/styles/common-styles.md
index 3d38b2e..8c3680c 100644
--- a/docs/docs/styles/common-styles.md
+++ b/docs/docs/styles/common-styles.md
@@ -7,7 +7,7 @@
:::
::: warning
-Weex supports `px`and `wx`(not affected by screen width and viewPortWidth) as length unit, `%`, `rem`, `em` are not supported.
+All Styles support `px` as length unit,part of them support `wx`. `%`, `rem`, `em` are not supported.Learn more at [CSS Units](https://weex.apache.org/docs/styles/css-units.html)
:::
## Box Model
diff --git a/docs/docs/styles/css-units.md b/docs/docs/styles/css-units.md
index 69f4755..8d565fa 100644
--- a/docs/docs/styles/css-units.md
+++ b/docs/docs/styles/css-units.md
@@ -2,7 +2,8 @@
## CSS `length` unit
-`px` 、`wx` are supported as length units. For styles that should not be affected by screen width and viewPortWidth, please use `wx` as unit.
+All Styles support `px` as length unit,part of them support `wx`.
+
::: danger
Ignoring `px` or `wx` will cause render error on Webview.
@@ -12,6 +13,20 @@
`em`、`rem`、`pt`, `%`, etc. are not supported.
:::
+### `wx` unit
+Please use `wx` as unit for styles that should not be affected by screen width and viewPortWidth.The following are the styles that support `wx` unit.
+* Box Model
+ * `width {length}`
+ * `height {length}`
+ * `padding {length}`
+ * `margin {length}`
+ * `border-width {length}`
+* Transform：
+ * `translate {length}`
+* Text Styles:
+ * `font-size {number}`
+ * `line-height {length}`
+
## CSS `number` units
CSS `number` unit is a pure number without `px`, styles like `opacity`，`lines`，`flex` only accept `number` unit, you can find detail in [common-style](./common-styles.html).
diff --git a/docs/zh/docs/components/text.md b/docs/zh/docs/components/text.md
index 55503d3..c587601 100644
--- a/docs/zh/docs/components/text.md
+++ b/docs/zh/docs/components/text.md
@@ -45,6 +45,9 @@
* 支持 [通用事件](../events/common-events.html)。
## 其他
+### wx单位
+`font-size`和`line-height`支持`wx`单位，可设置使样式不受屏幕宽度和viewportwidth影响。
+
### 文字高度
文字高度的计算规则比较复杂，但大致上遵循以下优先级进行计算，排在前面的优先级最高。
1. 文字节点的`max-height`/`min-height`样式。
diff --git a/docs/zh/docs/modules/animation.md b/docs/zh/docs/modules/animation.md
index 47c272f..895326e 100644
--- a/docs/zh/docs/modules/animation.md
+++ b/docs/zh/docs/modules/animation.md
@@ -68,13 +68,13 @@
:::
#### styles中支持动画的属性
-* **`width`**，`width`表示动画执行后应用到组件上的宽度值。如果你需要影响布局，设置`needLayout`为`true`。默认值为`computed width`。
-* **`height`**，`height`表示动画执行后应用到组件上的高度值。如果你需要影响布局，设置设置为 `needLayout`为`true`。默认值为`computed width`。
+* **`width`**，`width`表示动画执行后应用到组件上的宽度值。如果你需要影响布局，设置`needLayout`为`true`。默认值为`computed width`。支持`wx`单位。
+* **`height`**，`height`表示动画执行后应用到组件上的高度值。如果你需要影响布局，设置设置为 `needLayout`为`true`。默认值为`computed width`。支持`wx`单位。
* **`backgroundColor`**，`backgroundColor`动画执行后应用到组件上的背景颜色，默认值为computed backgroundColor。
* **`opacity`**，`opacity`表示动画执行后应用到组件上的不透明度值，默认值为computed opacity。
* **`transformOrigin`**，`transformOrigin`定义变化过程的中心点，如`transformOrigin: x-axis y-axis` 参数 `x-axis` 可能的值为 `left`、`center`、`right`、长度值或百分比值，参数 `y-axis` 可能的值为 `top`、`center`、`bottom`、长度值或百分比。默认值为`center center`。
-* **`transform`**，`transform`变换类型，可能包含rotate`，`translate`，`scale`及其他属性。默认值为空。
- * `translate`/`translateX`/`translateY`指定元素要移动到的位置。单位是长度或百分比，默认值是0.
+* **`transform`**，`transform`变换类型，可能包含rotate`，`translate`，`scale`及其他属性。默认值为空。支持
+ * `translate`/`translateX`/`translateY`指定元素要移动到的位置。单位是长度或百分比，默认值是0。支持`wx`单位。
* `rotate`/`rotateX`/`rotateY`**v0.16+** 指定元素将被旋转的角度。单位是度 *角度度*，默认值是0
* `scale`/`scaleX`/`scaleY`按比例放大或缩小元素。单位是数字，默认值是1
* `perspective`**v0.16+** 观察者距离z=0平面的距离，在**Android 4.1**及以上有效。单位值数字，默认值为正无穷。
diff --git a/docs/zh/docs/styles/common-styles.md b/docs/zh/docs/styles/common-styles.md
index 669189e..6dd4962 100644
--- a/docs/zh/docs/styles/common-styles.md
+++ b/docs/zh/docs/styles/common-styles.md
@@ -7,7 +7,7 @@
:::
::: warning
-Weex 对于长度值目前只支持`px`和`wx`（不受屏幕宽度和viewPortWidth影响），不支持相对单位（`em`、`rem`）。
+对于长度值，Weex所有样式均支持`px`单位，部分样式支持`wx`单位，不支持相对单位（`em`、`rem`），详见[CSS单位](https://weex.apache.org/zh/docs/styles/css-units.html)。
:::
## 盒模型
diff --git a/docs/zh/docs/styles/css-units.md b/docs/zh/docs/styles/css-units.md
index 4b7a278..2295518 100644
--- a/docs/zh/docs/styles/css-units.md
+++ b/docs/zh/docs/styles/css-units.md
@@ -2,13 +2,27 @@
## CSS 长度单位
-在 Weex 中，我们**支持 `px`和`wx` 长度单位**。对于不希望受屏幕宽度和 viewPortWidth 影响的尺寸，请使用 `wx` 单位。
+在 Weex 中，**所有样式支持`px`长度单位，部分样式支持`wx`**。
::: warning 注意
- Weex 不支持类似 `em`、`rem`、`pt`,`%` 这样的 CSS 标准中的其他长度单位；
- 单位 `px`或`wx` 不可省略，否则在 H5 环境无法正确渲染；
:::
+### wx单位
+使用 `wx` 单位可使尺寸不受屏幕宽度和 viewPortWidth 影响。以下是支持`wx`单位的样式。
+* 通用盒模型：
+ * `width {length}`
+ * `height {length}`
+ * `padding {length}`
+ * `margin {length}`
+ * `border-width {length}`
+* Transform：
+ * `translate {length}`
+* 文本样式：
+ * `font-size {number}`
+ * `line-height {length}`
+
## CSS 数值单位
在 Weex 中，除了长度单位外，还有数值单位，仅仅一个数值，后面没有 `px` 等单位。用于 `opacity`，`lines`，`flex` 等属性指定一个纯数值。
