CSS 单位

CSS 长度单位

在 Weex 中，所有样式支持px长度单位，部分样式支持wx。

注意

• 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 等属性指定一个纯数值。

TIP

有时值必须是整数，例如：lines

CSS 颜色单位

Weex 支持多种颜色单位：

• 精简写法的十六进制，如#f00
• 十六进制，如 #ff0000
• RGB， 如 rgb(255, 0, 0)
• RGBA，如 rgba(255, 0, 0, 0.5)
• 色值关键字，如 red

.classA {
  /* 3-chars hex */
  color: #0f0;
  /* 6-chars hex */
  color: #00ff00;
  /* rgba */
  color: rgb(255, 0, 0);
  /* rgba */
  color: rgba(255, 0, 0, 0.5);
  /* transparent */
  color: transparent;
  /* Basic color keywords */
  color: orange;
  /* Extended color keywords */
  color: darkgray;
}

注意

• 只有上面列出的颜色格式被支持，其他颜色格式均不被支持。
• 6-chars hex16进制颜色值 是性能最好的颜色使用方式。除非有特殊原因，请使用6-chars hex格式。

颜色关键字列表