使用 CSS 的流畅界面

响应式设计应该是任何网站的核心功能。屏幕尺寸在不断变化，也不断缩小。这使得响应式设计不再局限于构图和布局。我们需要调整文本和元素的大小以及周围的间距。大多数情况下，我们通过添加媒体查询来实现这一点。但是，随着页面、元素和断点的不断变化，添加媒体查询变得难以维护。

重构vycke.dev时，我想移除对媒体查询的依赖。但是，我希望网站的大小和间距能够根据屏幕尺寸进行调整。我需要网站具有流畅性calc。通过使用 CSS 变量和 CSS函数，我可以实现这一点。来看看怎么做吧！

流体尺寸和间距

我之前使用媒体查询来设置间距值（例如padding和margin）和字体大小。在大屏幕上，我希望字体大小和间距比移动设备更大。目标是提高可用性并减少空间浪费。但是使用媒体查询时，我必须仔细检查所有不同的断点，并确定如何更改间距和字体大小。流畅的界面由此诞生。

使用流畅的界面，当您的网站规模增加时，您可以自动线性扩展属性（例如在16px和之间20px）。为了实现这一点，我们需要确定一个比率（介于 0 和 1 之间的值），以便根据网站规模缩放值。

要确定比例，首先需要确定网站的最小和最大宽度。有些网站会占用所有可用的水平空间，但很多网站都有最大宽度。确定最小和最大宽度后，我们可以使用以下公式计算比例。有了这个比例，我们就可以在两个值之间线性缩放尺寸。

         min(space, max-sw) - min-sw
ratio = -----------------------------
              max-sw - min-sw

通过这个比例，我们可以根据网站的水平尺寸来缩放任何尺寸（例如字体大小或间距）。

size = min-size + (max-size - min-size) × ratio

计算比率calc

要实现这个概念，你需要 CSS 变量和calc函数。虽然看起来很简单，但实现起来还是有些棘手。首先，让我们确定基值。在这个实现中，所有大小都是无单位的，即rem（基于--unit）。每个网站都有一个默认的字体大小，px对应于1rem。虽然这个基值可以由你设置，但也可以由用户在浏览器设置中设置。这是一个简单的流动性实现。基于这个值，我们可以设置初始变量。

/* base values */
:root {
  --unit: 1rem;
  --min-width: 20; /* based on 16px */
  --max-width: 75; /* based on 16px */
}

知道了基数后，我们就可以开始计算比率了。这里我们遇到了一些需要处理的问题。我们需要使用minCSS 函数来计算--area用于确定比率的值。但是，这个函数总是需要带单位的值来进行比较。因此，我们将--max-width乘以--unit。

信息：使用 进行乘法运算时calc，至少有一个值需要无单位。除法运算时，至少右边需要无单位。加法和减法运算时，所有值都需要无单位，或者具有（变化的）单位。

变量是所述比率--area方程的左边。现在我们可以计算了。由于已经有了单位，所以将是介于和之间的一个值。--ratio--arearem--ratio0rem1rem

/* ratio calculation */
:root {
  --screen: calc(min(100vw, var(--max-width) * var(--unit)));
  --area: calc(var(--screen) - var(--min-width) * var(--unit));
  --ratio: calc(var(--area) / (var(--max-width) - var(--min-width)));
}

创建与尺寸相关的设计标记

根据实际屏幕尺寸，在0rem和之间找到一个比例1rem，我们就可以开始缩放网站上的元素了。为此，我们使用了之前描述的比例公式。我们来看下面的例子。此示例计算了一篇文章的构建字体大小。

/* example for a fluid article font-size */
:root {
  --min-size: 1.125rem;
  --max-size: 1.375rem;
  --scale: calc(var(--max-size) - var(--min-size));
  --size: calc(var(--min-size) + var(--scale) * var(--ratio));
}

在小屏幕上，字体大小为 ，1.125rem在大屏幕上为1.375rem。有了基础字体大小16px，我们现在可以计算不同屏幕尺寸的精确字体大小。屏幕大小 的784px文章字体大小为20.109px。但字体大小只是我们可以应用流动性的众多领域之一。

• 段落和标题的字体大小。
• 元素之间和周围使用的各种间距值。
• 网站徽标和图标的尺寸。

所有元素都可以有自己的一套流动性计算方法。这些计算方法可以是单独的设计令牌，也可以从父元素进行缩放（例如，使用em而不是rem）。

结论

在重构vycke.dev时，我希望减少媒体查询的数量，但保持响应速度。我希望减少网站的 CSS 占用空间。但最重要的是，我希望我的 CSS 更易于维护。增加字体大小、元素大小和间距的流畅性有助于实现这一目标。想亲眼见证这种流畅性吗？只需在您的笔记本电脑或 PC 上打开这篇文章，然后慢慢调整浏览器窗口的大小即可。