#yyds干货盘点# 一致、流畅的缩放类型和间距

原创

liuhao951866 2022-02-16 07:20:20 博主文章分类：知识加深 ©著作权

文章标签 css 最小值测试文本 文章分类 JavaScript 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者liuhao951866的原创作品，请联系作者获取转载授权，否则将追究法律责任

当 Chris 第一次给我发这个提示时，我正在考虑写关于渐进增强的文章，但是这个主题是如此广泛以至于是一回事而且太容易预测了，特别是对于那些已经熟悉我的写作的人。话虽如此，我在本文中要概述的也不仅仅是一件事，而是我遇到写作提示的那一天将是猪开始飞行的那一天。然而，这一组事情将改变你编写 CSS 的方式。

我个人认为这组事情让很多网站都崩溃了——尤其是在响应式设计方面。这组的东西是排版和间距。我经常看到不一致的间距——尤其是垂直间距——这使得内容难以扫描并产生这种微妙的、脱节的感觉。类型也是如此：小视口上的大标题，或者在视觉上没有大小对比的标题层次结构，使它们在视觉上毫无用处。

使用尺寸刻度和流体类型可以轻松解决所有这些问题，我保证它会让您的网站看起来和感觉更好。让我们开始吧。

尺码尺到底是什么鬼？

尺码比例是基于比例的尺寸的统一进展 - 或者更准确地说，是一个比率。

在type-scale.com的截图中，我选择了一个“完美的第四”比例，它使用了1.333 的比率。这意味着每次增大尺寸，当前尺寸乘以 1.333，每次减小尺寸，除以 1.333。

如果您的基本字体大小为16px，使用此比例，下一个大小为16 * 1.333，即21.33px。下一个尺寸是21.33 * 1.333，即28.43px。当您上下移动刻度时，这提供了一个可爱的曲线。

CSS`clamp()`和类型流动性

多年来，如果你说，“嘿，安迪，你最喜欢的 CSS 功能是什么？” 我会立即说 flexbox，但不，现在不是。我是clamp() 超级粉丝。我在这里更详细地写了它，但总结clamp()是它根据你给它的三个参数做了一些聪明的事情：

最小值
理想值
最大值

这在流畅的排版和间距方面是一个非常有用的工具，因为您可以这样编写 CSS：

.my-element {
  font-size: clamp(1rem, calc(1rem * 3vw), 2rem);
}

这一点 CSS 为我们提供了基于视口宽度的完整响应式文本大小，并带有方便的锁，以确保大小不会变得太大或太小。

使用钳位放大和缩小时，测试文本是否清晰非常重要。它应该非常明显地更大或更小。因为我们在rem流体计算中使用了一个单位，所以我们对此有很大帮助。

把它们放在一起

对，所以我们已经设置了尺寸比例和 CSS——clamp()它们是如何组合在一起的？乌托邦背后的聪明人想出了最简单但最方便的方法。我使用他们的类型工具和间距工具为大小视口创建尺寸比例。然后，使用clamp()，我生成了一个完全流动的主尺寸比例，以及一个通知Gorko配置的 Sass 地图。

$gorko-size-scale: (
  '300': clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem),
  '400': clamp(0.88rem, 0.83rem + 0.24vw, 1rem),
  '500': clamp(1.09rem, 1rem + 0.47vw, 1.33rem),
  '600': clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem),
  '700': clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem),
  '800': clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem),
  '900': clamp(2.67rem, 2.07rem + 3vw, 4.21rem),
  '1000': clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem)
);

这个片段来自我的网站piccalil.li，因此排版非常易于使用。

你也可以把它翻译成好的 ol' CSS 自定义属性：

:root {
  --size-300: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
  --size-400: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
  --size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
  --size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
  --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
  --size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
  --size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
  --size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
};