响应式设计

概览

响应式设计是现代网页开发的一个基本方面，它允许网站和应用程序无缝适应不同的屏幕尺寸和设备。

Chakra 默认提供五个断点

const breakpoints = {
  base: "0em", // 0px
  sm: "30em", // ~480px
  md: "48em", // ~768px
  lg: "62em", // ~992px
  xl: "80em", // ~1280px
  "2xl": "96em", // ~1536px
}

对象语法

以下是如何在大屏幕上更改文本字体粗细的示例

<Text fontWeight="medium" lg={{ fontWeight: "bold" }}>
  Text
</Text>

或使用基于属性的修饰符

<Text fontWeight={{ base: "medium", lg: "bold" }}>Text</Text>

数组语法

Chakra 还接受数组作为响应式样式的值。在数组中为每个断点传递相应的值。以我们之前的代码为例

<Text fontWeight={["medium", undefined, undefined, "bold"]}>Text</Text>

请注意，使用 undefined 来跳过 md 和 lg 断点。

断点定位

断点范围

Chakra 提供了一种使用 To 标记来定位断点范围的方法。要在 md 和 xl 断点之间应用样式，请使用 mdToXl 属性

<Text fontWeight={{ mdToXl: "bold" }}>Text</Text>

单个断点

要定位单个断点，请使用 Only 标记。以下是如何仅在 lg 断点处应用样式，使用 lgOnly 属性的示例

<Text fontWeight={{ lgOnly: "bold" }}>Text</Text>

在断点处隐藏元素

Chakra 提供了 hideFrom 和 hideBelow 工具，用于在特定断点处隐藏元素。

要从 md 断点开始隐藏元素，请使用 hideFrom 工具

<Stack hideFrom="md">
  <Text>This text will be hidden from the `md` breakpoint</Text>
</Stack>

要在 md 断点以下隐藏元素，请使用 hideBelow 工具

<Stack hideBelow="md">
  <Text>This text will be hidden below the `md` breakpoint</Text>
</Stack>

自定义断点

要了解如何自定义断点，请参阅自定义断点部分。

常见问题

为什么断点被转换为 rem？

转换为 rem 是有意为之的，并且出于可访问性原因是有益的

• 用户更改了其浏览器的字体设置
• 用户放大页面
• HTML 中的字体大小已更改