样式设置

在 Rax 中，有以下几种方式给元素设置样式：

内联样式

通过元素的 style 属性，为元素设置内联样式：

1const myStyle = {
2  fontSize: '24px',
3  color: '#FF0000'
4};
5
6const element = <h1 style={myStyle}>Hello Rax</h1>;

需要注意的是，style 的值是一个 object，object 的属性采用 小驼峰命名 的方式。

CSS 文件

除了上述方式，还可以跟往常写 css 一样，在元素上写 className 属性以及创建一个 css 文件，然后需要在 jsx 中将 css 引入。

index.css

1.title-container {
2  background: #f40;
3  padding: 30px;
4  font-size: 50px;
5  font-weight: 500;
6}

index.js

1import { createElement } from 'rax';
2import './index.css';
3
4export default function Title() {
5  return (<View className="title-container">...</View>);
6}

rpx 单位

rpx(responsive pixel) 是 Rax 中的样式单位，它可以根据屏幕宽度进行自适应。在多端下为什么我们推荐使用 rpx，主要有几个原因：

• 开发 Rax 页面设计师通常用 750 作为设计稿的标准，在设计稿量出来是多少就写多少 rpx
• 在浏览器标准中，px、rem 的语义跟 responsive 差异较大
• vw 在 weex 中不支持，并且开发写 vw 的话每次都需要换算，使用较麻烦

我们规定屏幕宽度为 750rpx，以 iPhone6 为例，它的屏幕宽度为 375px，则 750rpx = 375px = 100vw，所以在 iPhone6 中，1rpx = 0.5px = 100/750vw。

建议开发 Rax 页面时设计师用 750 作为设计稿的标准