跳到主要内容

Sizing and Spacing

在ChatGPT中打开

间距和大小的标记用于在您的应用中提供一致的间距和大小。所有的大小和间距属性都以 rem 为单位定义。

REM 单位

rem 是一个相对长度单位。它相对于 根元素 的字体大小。

大小

使用这些属性来调整组件的大小(宽度、高度)。m 是几乎所有组件的标准大小。

选择大小

选择大小时,请始终确保它足够大,以便用于触控目标。

示例

.element {
width: var(--dwc-size-m);
height: var(--dwc-size-m);
}

变量

变量默认值示例
--dwc-size-3xs1.125rem
--dwc-size-2xs1.375rem
--dwc-size-xs1.625rem
--dwc-size-s1.875rem
--dwc-size-m2.25rem
--dwc-size-l2.75rem
--dwc-size-xl3.5rem
--dwc-size-2xl4rem
--dwc-size-3xl4.25rem
--dwc-sizevar(--dwc-size-m)

间距

使用这些属性来调整组件之间的间距(边距、填充)。

示例

.element {
padding: var(--dwc-space-m);
}

变量

变量默认值示例
--dwc-space-3xs0.075rem
--dwc-space-2xs0.15rem
--dwc-space-xs0.25rem
--dwc-space-s0.5rem
--dwc-space-m1rem
--dwc-space-l1.25rem
--dwc-space-xl1.5rem
--dwc-space-2xl1.75rem
--dwc-space-3xl2rem
--dwc-spacevar(--dwc-space-s)