具有流體響應(yīng)性的版式

這是很好的第一步，但是您只能將其限制font-size為設(shè)計(jì)人員在提供的斷點(diǎn)處指定的范圍。如果您問(wèn)：“ font-size850像素寬的視口應(yīng)該是什么？” ，設(shè)計(jì)師會(huì)怎么說(shuō)呢？在大多數(shù)情況下，答案是它應(yīng)該在24像素至34像素之間。但是現(xiàn)在，根據(jù)您的CSS，它僅為24px，這可能不是設(shè)計(jì)人員所設(shè)想的。

此時(shí)，您的選擇是計(jì)算該大小應(yīng)為多少并添加另一個(gè)斷點(diǎn)。那很容易。但是其他所有決議呢？font-size800px寬應(yīng)該是什么？那900px呢？935px呢？顯然，設(shè)計(jì)人員不會(huì)為每個(gè)可能的分辨率提供完整的布局。即使它們做到了，您是否應(yīng)該font-sizes為設(shè)計(jì)人員所需的所有不同點(diǎn)添加數(shù)十個(gè)（或數(shù)百個(gè)）斷點(diǎn)？當(dāng)然不是。

您的布局已經(jīng)隨著視口的寬度而流暢地縮放。如果您的版式可以根據(jù)您的布局合理地縮放，那會(huì)不會(huì)很好？我們還可以做些什么來(lái)改善這一點(diǎn)？

視口救援單位？

視口單位是朝正確方向邁出的又一步。它們使您的文本可以根據(jù)布局靈活地調(diào)整大小。如今，瀏覽器支持功能非常強(qiáng)大。

但這僅在您的創(chuàng)意畫(huà)板考慮到這一點(diǎn)時(shí)有效。設(shè)計(jì)師是否選擇了恰好是每個(gè)畫(huà)板寬度2％的文字大小？當(dāng)然不是。讓我們計(jì)算vw每個(gè)斷點(diǎn)所需的值：

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

它們很接近，但不盡相同。因此，您仍然需要使用媒體查詢?cè)谖谋敬笮≈g進(jìn)行轉(zhuǎn)換，并且仍然會(huì)有跳轉(zhuǎn)。考慮一下這怪異的副作用：

@ 767像素，視口寬度的3.82％為29像素。如果視口寬1像素，則font-size突然下降到24px。調(diào)整視口大小的動(dòng)畫(huà)演示了這種不良的副作用：

統(tǒng)計(jì)線性回歸？

等待。什么？是的，這是一篇有關(guān)CSS的文章，但是一些基本的數(shù)學(xué)方法可以為解決我們的問(wèn)題提供很好的解決方案。

首先，讓我們?cè)趫D表上繪制分辨率和相應(yīng)的文本大?。?/span>

在這里，您可以看到設(shè)計(jì)師在定義的視口寬度下指定的文本大小的散點(diǎn)圖。x軸是視口寬度，y軸是font-size。看到那條線？這就是趨勢(shì)線。這是一種font-size根據(jù)提供的數(shù)據(jù)查找任何視口寬度的插值的方法。

趨勢(shì)線是所有這些的關(guān)鍵

如果您可以font-size根據(jù)這一趨勢(shì)線進(jìn)行設(shè)置，那么您將擁有一個(gè)可以在所有分辨率上平滑縮放的h1，這些分辨率接近匹配設(shè)計(jì)師的預(yù)期。首先，讓我們看一下數(shù)學(xué)。直線由以下公式定義：

如何在CSS中使用它？

好的，這在數(shù)學(xué)上變得越來(lái)越沉重。我們?nèi)绾卧谇岸薟eb開(kāi)發(fā)中實(shí)際使用這些東西？答案是CSS calc()！再次，很好地支持了一種相當(dāng)新的CSS技術(shù)。

/// 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 <jake.e.wilson@gmail.com>
@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});

}