SuperAPI AI 工具集

sizing-units

通用与其它

查看项目

更新于 10-15 21:08

技能介绍

用途:这是一份 CSS 尺寸单位选择指南,核心主张是单位不是格式偏好,而是声明“用户放大文字时该值如何变化”。rem 属于文字、应随之增长;px 属于屏幕、应保持不变;%、fr、ch、clamp()、min() 属于可用空间。应按此问题选单位,而非套用统一风格,全 rem 与全 px 都会产生缺陷。

主要能力:区分整页缩放与浏览器默认字号两个独立控件——前者放大一切并带来横向滚动,后者只放大文字、保留布局,低视力用户常长期设置后者。给出 rem 适用场景:所有字号与行高、文字周围内边距、控件高度、文本列 max-width(如 65ch)、承载文字的块间距。px 适用场景:发丝线与边框、阴影偏移与模糊、控件内固定小图标、亚像素修正。相对单位适用场景:布局宽度与间距,固定 px 容器并不稳定而是脆弱,文字增长时会被裁切;含文字元素用 min-height 而非 height。媒体查询用 em,rem 与 em 在媒体查询中都基于浏览器默认字号,忽略 html 的 font-size 设置。

必要用法与限制:不要重置根字号,html { font-size: 62.5%; } 会默认覆盖用户偏好。脚本按容器测量元素时,容器尺寸必须在各断点确定且独立于被测量元素,并观察该盒子本身而非 window 事件。文末审查清单涵盖字号行高与文字内边距是否用 rem、边框与阴影是否用 px、含文字元素是否误用 height、容器宽度是否相对、断点是否用 em、根字号是否保持默认、200% 字号下控件是否不裁切且无横向滚动、脚本测量容器是否由布局而非子元素决定。资料未提供安装命令、平台或收费信息。