账户中心 退出系统
普通版本 weex版本

graceUI - weex 教程 - css 单位

<div> 是通用容器

不要在 <div> 中直接添加文本,而要使用 <text> 组件。
在 Weex 中,<div> 不可滚动。
要控制 <div> 的层级,建议不要超过14层,否则会很影响页面性能。


CSS 长度单位

在 Weex 中,只支持 px 长度单位。
需要注意的是weex下的px与web浏览器中的px不一样,weex下的px是动态单位 :
1px的大小会随着移动设备宽度的大小动态变化!所有设备的宽度都是 750px;

注意

Weex 不支持类似 em、rem、pt,% 这样的 CSS 标准中的其他长度单位;单位 px 不可省略;

CSS 数值单位

在 Weex 中,除了长度单位外,还有数值单位,仅仅一个数值,后面没有 px 等单位。用于 opacity,lines,flex 等属性指定一个纯数值。

CSS 颜色单位

Weex 支持多种颜色单位:

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

只有上面列出的颜色格式被支持,其他颜色格式均不被支持。

简单的演示

<template>
	<div>
		<text class="test1">graceUI</text>
		<text class="test2">test.....</text>
	</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.test1{font-size:50px; line-height:80px; color:#007AFF;}
.test2{font-size:80px; line-height:120px; color:#FF0066;}
</style>