CSS 夹具生成器

CSS 钳位()生成器构建单个钳位(最小、首选、最大)声明,在两个屏幕宽度之间平滑地缩放一个值。您不是编写几个媒体查询来将标题从手机上的 24px 逐步到台式机上的 48px,而是设置最小大小、最大大小以及它们映射到的视口范围,生成器返回一行 CSS,该行在两者之间插入每个大小。

clamp()函数采用三个参数:下界值、首选值和上界值,浏览器使用首选值,除非它低于最小值或高于最大值,在这种情况下,它锁定到该绑定值。该生成器将首选值计算为视口的线性函数,将固定 rem 项与 vw 项相结合,因此结果与窗口同步增长,同时永远不会低于最小值或超过最大值。这种技术通常称为流体排版,尽管它对于边距、填充、间隙和宽度同样有效。

JavaScript 在您的浏览器中计算所有内容,因此您输入的任何内容都不会上传,并且一旦加载工具就会离线工作,您可以输入像素或 rem 大小,设置自定义根字体大小,并读取在公共视口宽度处显示计算值的预览表,因此您可以在将夹子粘贴到样式表之前确认曲线行为()。

Fluid sizing 有一个无障碍陷阱值得刻意避免,一个夹子表达式,其中间项纯粹用 viewport 单位表达,忽略了读者的字体大小设置,因为 vw 不会响应它,而无法生长的文本会失败 WCAG 1.4。4。rem 组件保留在首选值中,也就是生成的输出所做的,意味着大小仍然响应浏览器缩放和更大的默认字体。始终设置两个边界:没有它们,值在任一方向上都无限制地缩放。

CSS钳位生成器这里是一个真实的航向,输入24和48 px作为大小,360和1440作为视口,保留16px根,按生成钳位(),输出为字体大小:钳位(1.5rem,1rem + 2.2222vw,3rem);,预览表确认它:360的24px,768的33.07px,1024的38.76px和1440的48px,360以下的航向停留在1.5rem,1440以上的停在3rem,这是有界限的流体排版的全部点。