具有流体响应性的版式-利来国际登录

这是很好的第一步，但是您只能将其限制font-size为设计人员在提供的断点处指定的范围。如果您问：“ font-size850像素宽的视口应该是什么？” ，设计师会怎么说呢？在大多数情况下，答案是它应该在24像素至34像素之间。但是现在，根据您的css，它仅为24px，这可能不是设计人员所设想的。

此时，您的选择是计算该大小应为多少并添加另一个断点。那很容易。但是其他所有决议呢？font-size800px宽应该是什么？那900px呢？935px呢？显然，设计人员不会为每个可能的分辨率提供完整的布局。即使它们做到了，您是否应该font-sizes为设计人员所需的所有不同点添加数十个（或数百个）断点？当然不是。

您的布局已经随着视口的宽度而流畅地缩放。如果您的版式可以根据您的布局合理地缩放，那会不会很好？我们还可以做些什么来改善这一点？

视口救援单位？

视口单位是朝正确方向迈出的又一步。它们使您的文本可以根据布局灵活地调整大小。如今，浏览器支持功能非常强大。

但这仅在您的创意画板考虑到这一点时有效。设计师是否选择了恰好是每个画板宽度2％的文字大小？当然不是。让我们计算vw每个断点所需的值：

22px大小@ 576px宽= 22 / 576 ×100 = 3.82vw 24px大小@ 768px宽= 24 / 768×100 = 3.13vw 34px大小@ 992px宽= 34 / 992 ×100 = 3.43vw

它们很接近，但不尽相同。因此，您仍然需要使用媒体查询在文本大小之间进行转换，并且仍然会有跳转。考虑一下这怪异的副作用：

@ 767像素，视口宽度的3.82％为29像素。如果视口宽1像素，则font-size突然下降到24px。调整视口大小的动画演示了这种不良的副作用：

统计线性回归？

等待。什么？是的，这是一篇有关css的文章，但是一些基本的数学方法可以为解决我们的问题提供很好的利来国际登录的解决方案。

首先，让我们在图表上绘制分辨率和相应的文本大小：

在这里，您可以看到设计师在定义的视口宽度下指定的文本大小的散点图。x轴是视口宽度，y轴是font-size。看到那条线？这就是趋势线。这是一种font-size根据提供的数据查找任何视口宽度的插值的方法。

趋势线是所有这些的关键

如果您可以font-size根据这一趋势线进行设置，那么您将拥有一个可以在所有分辨率上平滑缩放的h1，这些分辨率接近匹配设计师的预期。首先，让我们看一下数学。直线由以下公式定义：

如何在css中使用它？

好的，这在数学上变得越来越沉重。我们如何在前端web开发中实际使用这些东西？答案是css calc()！再次，很好地支持了一种相当新的css技术。

/// least-squares-fit
/// calculate the least square fit linear regression of provided values
/// @param {map} $map - a sass map of viewport width and size value combinations
/// @return linear equation as a calc() function
/// @example
///   font-size: least-squares-fit((576px: 24px, 768px: 24px, 992px: 34px));
/// @author jake wilson
@function least-squares-fit($map) {

  // get the number of provided breakpoints
  $length: length(map-keys($map));

  // error if the number of breakpoints is < 2
  @if ($length < 2) {
    @error "leastsquaresfit() $map must be at least 2 values"
  }

  // calculate the means
  $restotal: 0;
  $valuetotal: 0;
  @each $res, $value in $map {
    $restotal: $restotal $res;
    $valuetotal: $valuetotal $value;
  }
  $resmean: $restotal/$length;
  $valuemean: $valuetotal/$length;

  // calculate some other stuff
  $multiplieddiff: 0;
  $squareddiff: 0;
  @each $res, $value in $map {

    // differences from means
    $resdiff: $res - $resmean;
    $valuediff: $value - $valuemean;

    // sum of multiplied differences
    $multiplieddiff: $multiplieddiff ($resdiff * $valuediff);

    // sum of squared resolution differences
    $squareddiff: $squareddiff ($resdiff * $resdiff);
  }

  // calculate the slope
  $m: $multiplieddiff / $squareddiff;

  // calculate the y-intercept
  $b: $valuemean - ($m * $resmean);

  // return the css calc equation
  @return calc(#{$m*100}vw #{$b});

}