响应样式

Reflexjs 包括一种简写语法，用于编写移动优先响应式样式。

每个样式道具都接受响应式样式，可根据不同的断点条件应用。

若要编写响应式样式，请使用 | 管道。

<div p="4|6|8" />
 CopyCopy

此快捷方式是一种替代方案，无需手动编写媒体查询。

鉴于以下情况

<div bg="red|blue|green" />

// or

// Array values are also supported.
<div bg={["red", "blue", "green"]} />
 CopyCopy

Reflexjs 将生成以下 CSS

.css-HASH {
  background-color: "red";
}

@media screen and (min-width: 640px) {
  .css-HASH {
    background-color: "blue";
  }
}

@media screen and (min-width: 768px) {
  .css-HASH {
    background-color: "green";
  }
}
 CopyCopy

跳过断点

如果要跳过断点，可以使用值 null 或将其留空。

<div bg="red|null|green" />

// or

<div bg="red||green" />
 CopyCopy