行间距

媒体查询非常适合在不同屏幕尺寸下以突变的方式更改值。 但是，结合calc()和视口单位（如vw和vh）的强大功能，我们可以使布局更加流畅。 为此，我们将使用一种称为线性插值的技术。

线性插值是用于查找直线上两点之间值的公式。 在我们的案例中，这两个点是 CSS 值，例如我们想要在给定视口宽度范围内插值的**字体大小**、**边距**或**宽度**。

我们可能希望在给定视口宽度范围内插值**之间**的原因是，避免在视口更改时创建多个断点来控制内容的流动。 相反，我们让用户的浏览器根据我们的指令计算它获得的值。 让我解释一下。

以下代码段是基于线性插值的 Sass 函数，我们在Aranja中一直将其称为between。

/**
 * Computes a CSS calc function that betweens a value from
 * A to B over viewport-width A to viewport-width B.
 * Requires a media query to cap the value at B.
 */

@function between($from, $to, $fromWidth, $toWidth) {
  $slope: ($to - $from) / ($toWidth - $fromWidth);
  $base: $from - $slope * $fromWidth;

  @return calc(#{$base} + #{100vw * $slope});
}

该函数的使用方法如下

$small: 400px; 
$large: 1000px;

.Container {
  /* The base (smallest) value. */
  padding: 20px;

  /* In $small it should be 20px and in $large it should be 100px,  */
  /* In viewports between that its padding should be calculated */
  @media (min-width: $small) {
    padding: between(20px, 100px, $small, $large);
  }

/* In $large we cap the value at 100px */
  @media (min-width: $large) {
    padding: 100px;
  }
}

上面的代码示例展示了我们如何将容器的填充从“移动设备”尺寸下的 20px 插值到“桌面”尺寸下的 100px。 介于两者之间的任何尺寸都会得到一个介于 20 到 100 像素之间的计算填充量。 为了防止填充超过最大值，我们使用断点对其进行限制。

尝试调整以下演示的大小以查看示例的实际效果

查看笔

between函数擅长解决间距问题。 以前我们会手动使用不同的媒体查询来解决这些问题。

示例布局

才华横溢的Carly Sylvester借给了我以下她为志愿消防员网站设计的线框图，以便我能够在此真实世界布局中演示此技术。

设计文档包含网站的桌面版、平板电脑版和移动版，分别为 1440px、720px 和 324px。
实际上，这些不同设备之间的界限并不那么清晰，因此我们将给定的值作为目标点，并使用我们的函数在其之间进行插值。

请注意，桌面版和平板电脑版的布局相似，除了使用了空白和字体大小——我们能够在它们之间平滑地进行插值。 当我们到达最小的目标点时，我们将布局转换为经典的全宽移动布局。

查看笔

为了进行比较，让我们看看以通常的方式完成的实现，其中使用 3 个主要断点将布局切换到其新值。

查看笔

演示视频

尝试在不同的屏幕尺寸下浏览演示，我们的函数的优势应该很明显。 为了使网站的“常规”版本更好，我们需要除了设计文档中的原始三个断点之外添加更多断点，从而导致更多跳跃。

结合 rem 的强大功能

我们可以使用该函数的一个强大技术是between根font-size并基于rems设置样式

查看笔

rem单位引用根font-size（在:root或html元素上设置的字体大小）以确定其值，而根font-size引用**视口宽度**以确定其值。 我们将根font-size在最小值时设置为 10px，在最大值时设置为 18px，结果是在两者之间平滑过渡。 演示中卡片的最小尺寸为 245px（在我们的$small断点处），并且逐渐增大，直到在我们的$large断点处达到峰值 440px。

结束语

我相信，通过利用这项技术，我们可以为在不符合“移动设备”或“平板电脑”尺寸概括的设备上浏览的用户提供更好的网络体验。 至少对我而言，它也使开发过程更加愉快，因为我的表格上减少了与布局相关的错误。

关于浏览器支持——事实上，我们只需要calc()和vw就可以使这项技术发挥作用，这使得它在美国和欧洲的普及率约为97%，在全球约为84%。

例如，在上面的演示中，不支持的浏览器（主要是 Opera Mini 和 UC 浏览器）将使用我们的最低（基本）值或最高（限制）值，具体取决于视口宽度。