企业官网建设流程全解析

amis 低代码框架 Height 高度工具类全解析：从 h-1 到 h-screen 的间距体系与响应式用法

【免费下载链接】amis前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis

本指南聚焦 amis 前端低代码框架内置的高度（Height）工具类体系，系统梳理 h-* / min-h-* / max-h-* 完整类名清单、各类的实际像素换算、rem与百分比取值规则，并结合 amis-ui 的 SCSS 变量与混合宏实现，讲清楚这些类是如何被生成、如何作用于 JSON 配置生成的页面，以及如何在移动端与桌面端断点下做响应式高度控制。读完本文，你将能在自己的 amis 页面与主题定制中熟练使用全部高度工具类。

一、Height 工具类是什么：amis 的原子化高度能力

在 amis 低代码框架中，页面由 JSON 配置描述、由 amis 渲染器渲染，而布局与尺寸的微调并不需要每次都写自定义 CSS。amis-ui 提供了一套与 Tailwind 风格对齐的原子化 CSS 工具类（helper class），其中高度工具类就是通过h-*、min-h-*、max-h-*前缀快速为任意元素设置height、min-height、max-height属性的能力。

这套体系定义在 packages/amis-ui/scss/helper/sizing/ 目录下，包含两份配套文件：

• _height.md：完整的类名 → CSS 属性对照表（即官方文档，可直接查阅）；
• _height.scss：实际的 SCSS 实现，负责把变量表展开生成全部类。

同时，helper.scss作为 amis-ui 工具类样式的统一入口，在第 58～59 行通过@import './helper/sizing/width';与@import './helper/sizing/height';把高度工具类打进最终样式包，也就是说只要你的项目引入了 amis-ui 的样式，这些类就开箱即用。

二、完整类名清单与属性对照表

以下表格完整继承了 官方文档 的全部内容，分为「定高」「最小高度」「最大高度」三组。

2.1 固定高度h-*

2.2 最小高度min-h-*

2.3 最大高度max-h-*

三、取值背后的换算规则：rem、百分比与视口单位

高度类只输出一个 CSS 属性，但它背后有一套统一的数值体系，理解它才能真正用好这些类。

3.1 rem 刻度来自全局 spacing 变量

h-1对应0.25rem、h-4对应1rem、h-96对应24rem，这些刻度并不是硬编码在_height.scss里，而是来自 packages/amis-ui/scss/_variables.scss 中的$spacing表。该表以「1 单位 = 4px」的 Tailwind 风格递增（px: 1px、0.5: 2px、1: 4px、1.5: 6px……直到96: 384px），并且所有值都通过px2rem()函数从像素换算为 rem。例如：

• 4→px2rem(16px)→1rem，因此h-4输出height: 1rem；
• 10→px2rem(40px)→2.5rem，因此h-10输出height: 2.5rem；
• 96→px2rem(384px)→24rem，因此h-96输出height: 24rem。

因为使用的是 rem 而非固定 px，页面根字号变化时（如用户调整浏览器字号或设置主题根字号），所有高度会等比缩放，这保证了整体比例的一致性。需要注意表中没有h-13、h-15等中间值，只有明确列出的档位才可用。

3.2 高度变量表$heights与$maxHeights的组装

$heights变量 通过map-merge把$spacing与百分比/视口档位合并而来：

$heights: map-merge( $spacing, ( auto: auto, '1/2': 50%, '1/3': 33.333333%, '2/3': 66.666667%, // …… 1/4、1/5、1/6 等 full: 100%, screen: 100vh ) ) !default;

而$maxHeights只合并了full与screen两项（因为auto本身是max-height的默认值，不需要额外类）。这正是h-auto、h-full、h-screen、max-h-full、max-h-screen这些特殊类的来源：它们不是数字刻度，而是对 CSS 关键字（auto、100%、100vh）的工具类封装。

3.3 百分比高度与视口高度

• h-full（100%）：父容器必须显式设置了高度，百分比才有意义；
• h-screen（100vh）：直接等于视口高度，常用于撑满整个浏览器可视区域；
• h-1/2、h-1/3、h-2/3等分数档位提供精细的百分比控制，其中h-2/4与h-1/2同值 50%，h-3/6与h-1/2也同值 50%，属于同一数值的多别名。

四、源码实现：类是如何生成的

4.1 三个 mixin 的分工

_height.scss 的编译逻辑非常清晰，由三个 mixin 协作完成：

@mixin height-sizing($map: $heights, $prefix: '.') { @each $name, $value in $map { @if $name == default { #{$prefix}h { height: $value; } } @else { #{$prefix}h-#{'' + selector-escape($name)} { height: $value; } } } } @mixin max-height-sizing($map: $maxHeights, $prefix: '.') { @each $name, $value in $map { @if $name == default { #{$prefix}max-h { max-height: $value; } } @else { #{$prefix}max-h-#{'' + selector-escape($name)} { max-height: $value; } } } } @mixin make-heights($prefix: '.') { @include height-sizing($heights, $prefix); #{$prefix}min-h-0 { min-height: 0px; } #{$prefix}min-h-full { min-height: 100%; } #{$prefix}min-h-screen { min-height: 100vh; } @include max-height-sizing($maxHeights, $prefix); }

• height-sizing()：遍历$heights映射表，把每个name → value生成.h-{name} { height: value }；
• max-height-sizing()：遍历$maxHeights，生成.max-h-{name} { max-height: value }；
• make-heights()：整合以上两者，再手工补齐三个min-h-*类（min-height档位较少，直接写死三行）。

其中selector-escape()的作用值得注意：类名中的小数点与斜杠（如h-0.5、h-1/2）是 CSS 选择器的特殊字符，必须转义后才能写出合法的选择器，最终编译出的选择器形如.h-0\.5、.h-1\/2，这也解释了文档表格中类名为什么要写成h-0\.5、h-1\/2。

4.2 默认前缀与响应式断点扩展

文件末尾的两段代码决定了这些类的最终形态：

@include make-heights(); @each $deivce in map-keys($devices) { @include media-device($deivce) { @include make-heights('.' + selector-escape($deivce + ':')); } }

• 第一行用默认前缀.生成基础类，即.h-4、.min-h-full等；
• 第二行遍历$devices断点表：

$devices: ( m: '(max-width: 768px)', pc: '(min-width: 769px)' ) !default;

并通过 media-device mixin 包一层@media查询，同时把前缀替换为.{断点名}:，从而生成响应式变体类：.m:h-4（仅在宽度 ≤ 768px 时生效）与.pc:h-4（仅在宽度 ≥ 769px 时生效）。也就是说，高度工具类天然支持移动端 / PC 断点的条件覆盖。

五、在 amis 页面中的实际用法

5.1 在 JSON Schema 中直接使用

amis 的 样式说明文档 介绍了 helper class 的使用约定：可以在 schema 的任意节点上通过className属性挂载工具类。例如让一个容器占满父容器高度：

{ "type": "container", "className": "h-full", "body": { "type": "tpl", "tpl": "该容器将占满父元素高度" } }

给图片、媒体区域设置固定高度的典型写法：

{ "type": "image", "src": "/static/photo/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg", "className": "h-40", "title": "固定 10rem 高的图片" }

配合响应式断点类实现不同设备下高度不同：

{ "type": "container", "className": "h-64 pc:h-96", "body": "手机端 16rem 高，PC 端 24rem 高" }

5.2 常用组合建议

• 撑满父容器：h-full（父级需有确定高度）；
• 撑满视口：h-screen/min-h-screen，适合整页级布局；
• 限制超长内容：max-h-96+ 配合溢出隐藏或滚动；
• 弹窗 / 抽屉内部滚动区域：外层h-screen，内部列表用max-h-*兜底；
• 数字刻度优先使用 4px 倍数档位（h-4、h-8、h-12……），需要更细粒度时再用h-0.5、h-1.5等半步档。

六、与 Width 工具类的对照

同目录下还有一份 width 文档 和 width 实现，宽度体系在结构上高度相似：w-*同样基于$spacing生成数字刻度，且多了w-1x～w-3x（基于 em 的字体相对单位）与w-1/12～w-11/12（十二等分栅格）以及min-w-*/max-w-*的 xs～7xl 容器档位。两者的差异主要体现在：

需要同时控制元素宽高时，把w-*与h-*写在同一个className上即可，例如className="w-64 h-40"表示宽 16rem、高 10rem。

七、总结与查阅指引

amis 的高度工具类是一套完整、可组合、可响应式的原子化能力：数字档位遵循 4px 基准并自动换算为 rem，百分比与视口档位覆盖常见布局诉求，min-h-*与max-h-*补充上下界约束，m:/pc:前缀则提供了移动端与桌面端的条件化覆盖。

需要继续深入时，可以按以下路径在仓库中查阅：

• 类名完整对照表：packages/amis-ui/scss/helper/sizing/_height.md
• 生成逻辑与响应式扩展：packages/amis-ui/scss/helper/sizing/_height.scss
• 数值体系与断点定义：packages/amis-ui/scss/_variables.scss
• 断点媒体查询 mixin：packages/amis-ui/scss/_mixins.scss
• 工具类统一入口：packages/amis-ui/scss/helper.scss
• amis 样式使用约定：docs/style/index.md

【免费下载链接】amis前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis