框架CSS变量（CSS Variables）

与 ZMCMS 4.8.0601 版本同步发布(2026/6/19更新)。

响应式变量系统基于 CSS Custom Properties（CSS 自定义属性）实现，通过在不同断点下自动切换变量值，减少重复的媒体查询声明，使样式开发更加统一、简洁且易于维护。

在文本、间距、尺寸等大多数场景中，仅需定义响应式变量即可完成适配，无需重复编写相同的选择器和样式规则，从而有效降低代码量并提升后期维护效率

破坏性变更

4.8.0601 版本对部分变量名称进行了统一调整。

升级旧版本项目时，请检查并替换以下变量名称：

H1-H6 全局响应式变量

以下变量用于控制 H1-H6 标题元素的默认样式。

这些变量属于全局变量，无需添加任何 Class，设置后将自动应用于所有标题元素。

.ui-vars 响应式变量

.ui-vars 用于控制容器内正文内容的显示样式，包括字体、颜色、背景、行高等属性。

只有在当前元素或其父级元素添加 .ui-vars 类后，以下变量才会生效。

<div class="ui-vars">
    ...
</div>

body 标签,系统组件默认已启用 .ui-vars 功能，因此页面和系统组件正文可直接使用以下变量。 

响应式断点变量

除字体名称变量外，所有响应式变量均支持断点后缀。

例如：

.content-main{
    --body-size:14px;
    --body-size-md:15px;
    --body-size-lg:16px;
    --body-size-xl:18px;
}

系统将在对应断点下自动切换变量值。

使用示例

HTML

<div class="ui-vars content-main">
    <h1>Heading 1</h1>
    <p>This is content.</p>

    <h2>Heading 2</h2>
    <p>This is content 2.</p>
</div>

CSS

.content-main{
    --body-color:#333;
    --body-size:15px;

    /* ≥992px */
    --body-size-lg:16px;

    --heading-size:24px;

    /* ≥992px */
    --heading-size-lg:28px;

    --heading-weight:600;
    --heading-color:#111;
}

效果

• 默认正文字体：15px
• 992px 以上正文字体：16px
• 默认标题字体：24px
• 992px 以上标题字体：28px

工作原理

响应式变量系统会在不同断点下自动映射当前变量值。

例如：

--body-size
--body-size-md
--body-size-lg
--body-size-xl

最终统一映射为：

--body-size-current

组件内部只需读取：

font-size:var(--body-size-current);

即可自动获得当前断点对应的值。

这种方式可以避免在多个断点中重复编写如下代码：

@media(min-width:992px){
    .content-main p{
        font-size:16px;
    }
}

从而提升样式复用性和维护效率。