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 工具类样式的统一入口在第 5859 行通过import ./helper/sizing/width;与import ./helper/sizing/height;把高度工具类打进最终样式包也就是说只要你的项目引入了 amis-ui 的样式这些类就开箱即用。二、完整类名清单与属性对照表以下表格完整继承了 官方文档 的全部内容分为「定高」「最小高度」「最大高度」三组。2.1 固定高度h-*ClassPropertiesh-pxheight: 0.0625remh-0height: 0h-noneheight: 0h-0.5height: 0.125remh-1height: 0.25remh-1.5height: 0.375remh-2height: 0.5remh-2.5height: 0.625remh-3height: 0.75remh-3.5height: 0.875remh-4height: 1remh-5height: 1.25remh-6height: 1.5remh-7height: 1.75remh-8height: 2remh-9height: 2.25remh-10height: 2.5remh-11height: 2.75remh-12height: 3remh-14height: 3.5remh-16height: 4remh-18height: 4.5remh-20height: 5remh-24height: 6remh-28height: 7remh-32height: 8remh-36height: 9remh-40height: 10remh-44height: 11remh-48height: 12remh-52height: 13remh-56height: 14remh-60height: 15remh-64height: 16remh-72height: 18remh-80height: 20remh-96height: 24remh-autoheight: autoh-1/2height: 50%h-1/3height: 33.333333%h-2/3height: 66.666667%h-1/4height: 25%h-2/4height: 50%h-3/4height: 75%h-1/5height: 20%h-2/5height: 40%h-3/5height: 60%h-4/5height: 80%h-1/6height: 16.666667%h-2/6height: 33.333333%h-3/6height: 50%h-4/6height: 66.666667%h-5/6height: 83.333333%h-fullheight: 100%h-screenheight: 100vh2.2 最小高度min-h-*ClassPropertiesmin-h-0min-height: 0pxmin-h-fullmin-height: 100%min-h-screenmin-height: 100vh2.3 最大高度max-h-*ClassPropertiesmax-h-pxmax-height: 0.0625remmax-h-0max-height: 0max-h-nonemax-height: 0max-h-0.5max-height: 0.125remmax-h-1max-height: 0.25remmax-h-1.5max-height: 0.375remmax-h-2max-height: 0.5remmax-h-2.5max-height: 0.625remmax-h-3max-height: 0.75remmax-h-3.5max-height: 0.875remmax-h-4max-height: 1remmax-h-5max-height: 1.25remmax-h-6max-height: 1.5remmax-h-7max-height: 1.75remmax-h-8max-height: 2remmax-h-9max-height: 2.25remmax-h-10max-height: 2.5remmax-h-11max-height: 2.75remmax-h-12max-height: 3remmax-h-14max-height: 3.5remmax-h-16max-height: 4remmax-h-18max-height: 4.5remmax-h-20max-height: 5remmax-h-24max-height: 6remmax-h-28max-height: 7remmax-h-32max-height: 8remmax-h-36max-height: 9remmax-h-40max-height: 10remmax-h-44max-height: 11remmax-h-48max-height: 12remmax-h-52max-height: 13remmax-h-56max-height: 14remmax-h-60max-height: 15remmax-h-64max-height: 16remmax-h-72max-height: 18remmax-h-80max-height: 20remmax-h-96max-height: 24remmax-h-fullmax-height: 100%max-h-screenmax-height: 100vh三、取值背后的换算规则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: 1rem10→px2rem(40px)→2.5rem因此h-10输出height: 2.5rem96→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-full100%父容器必须显式设置了高度百分比才有意义h-screen100vh直接等于视口高度常用于撑满整个浏览器可视区域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-1xw-3x基于 em 的字体相对单位与w-1/12w-11/12十二等分栅格以及min-w-*/max-w-*的 xs7xl 容器档位。两者的差异主要体现在维度h-*高度w-*宽度数字刻度与$spacing完全一致px→rem与$spacing完全一致px→rem特殊档位auto、1/25/6、full、screenauto、1x/2x/3x、1/211/12、full、screen百分比精度最小 1/683.333333% 封顶支持 1/12 十二等分min-* / max-*仅 0 / full / screen含 xs7xl 容器尺寸档位需要同时控制元素宽高时把w-*与h-*写在同一个className上即可例如classNamew-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断点媒体查询 mixinpackages/amis-ui/scss/_mixins.scss工具类统一入口packages/amis-ui/scss/helper.scssamis 样式使用约定docs/style/index.md【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考