带有 rem 的响应式排版 - 以 % 或 px 为单位的基线字体大小？答案

【问题标题】：Responsive Typography with rem - Baseline fontsize in % or px?带有 rem 的响应式排版 - 以 % 或 px 为单位的基线字体大小？
【发布时间】：2015-04-20 21:42:47
【问题描述】：

我正在尝试使用 rems 通过 SCSS 实现响应式排版解决方案，以便仅对 html 中的基线字体大小而不是每个元素使用媒体查询。

我在 html 中发现了不同的字体大小方法：

html { font-size: 100%;  }  // uses the default browser font-size
html { font-size: 62.5%; }  // 62.5% = 10px to facilitate rem calculation
html { font-size: 16px;  }  // uses 16px

假设我会选择62.5%-approach suggested by Jonathan Snook，然后我可以使用a mixin for px-fallbacks: 轻松分配我的标题和段落安静

@mixin font-size($sizeValue: 1.6) {
    font-size: ($sizeValue * 10) + px;
    font-size: $sizeValue + rem;
}

h1 { @include font-size(3.2); }         // 32px
h2 { @include font-size(2.6); }         // 26px
h3 { @include font-size(2.2); }         // 22px
h4 { @include font-size(1.8); }         // 18px
h5 { @include font-size(1.6); }         // 16px
h6 { @include font-size(1.4); }         // 14px

然后我可以将媒体查询应用到 html 字体大小以在不同的分辨率下缩放排版，如下所示：

@media (min-width: 768px) { html { font-size: 56.3%; } } // 56.3% = 9px
@media (min-width: 992px) { html { font-size: 62.5%; } } // 62.5% = 10px
@media (min-width: 1200px) { html { font-size: 68.8%; } } // 68.8% = 11px

我的问题：

1.字体大小基线的最佳方法是什么（px vs 100% vs 62.5%）？

2。使用 SASS / SCSS 进行响应式排版的最佳整体方法是什么？

【问题讨论】：

这似乎是一个非常广泛的问题？
我在互联网上找到了很多关于如何处理响应式排版的不同建议，但我找不到一个普遍接受的标准化解决方案。每个人的做法似乎都不一样。
我认为您所拥有的是一种相当标准的方法。在我看来，它更归结为它是否适用于项目/设计。因为我们这样做的原因是为了让我们的生活更轻松。如果它这样做，那么它可能是正确的。
62.5% 是 9.375 像素（至少在我的电脑上），所以我看不出这将如何促进 rem 计算
这就是 62.5% 方法的问题：它在不同浏览器中的解释不同，这让我认为 px 中的基线更有意义。我们也不能在用户的浏览器中控制 100%（可以设置为一个完全奇怪的值）。

标签： css responsive-design sass typography

【解决方案1】：

我的 SCSS 流畅排版，很舒服：

html { 
    @include fluid-property(font-size, 1rem, 1.5rem, 320px, 1600px);
}


/// Fluid property/properties
/// Examples:
///      html           { @include fluid-property(font-size, 14px, 20px, 320px, 1366px); }                          // single property
///      html           { @include fluid-property(font-size, 1em, 2em, 320px, 1366px); }                            // single property
///      h1,h2,h3,h4,h5 { @include fluid-property((padding-left, padding-right), 10rem, 20rem, 48em, 64em); }       // multiple properties with same values
/// All units must be of the type: px / em / rem.
@mixin fluid-property($properties, $min-value, $max-value, $min-screen, $max-screen) {
    @each $property in $properties {
        #{$property}: $min-value;
    }
    @include media-min($min-screen) {
        @each $property in $properties {
            #{$property}: calc-interpolation($min-value, $max-value, $min-screen, $max-screen); 
        }
    }
    @include media-min($max-screen) {
        @each $property in $properties {
            #{$property}: $max-value;
        }
    }
}
@function calc-interpolation($min-value, $max-value, $min-screen, $max-screen) {
    $u-min-value: unit($min-value);
    $a: 0; $b: 0;
    @if ($u-min-value == em) {
        $a: em($max-value - $min-value) / em($max-screen - $min-screen);
        $b: $min-value - $a * em($min-screen); 
    } @else if ($u-min-value == rem) {
        $a: rem($max-value - $min-value) / rem($max-screen - $min-screen);
        $b: $min-value - $a * rem($min-screen); 
    } @else {
        $a: px($max-value - $min-value) / px($max-screen - $min-screen);
        $b: $min-value - $a * px($min-screen); 
    }    
    $sign: "+";
    @if ($b < 0) {
        $sign: "-";
        $b: abs($b);
    }
    @return calc(#{$a*100}vw #{$sign} #{$b});
}

它将渲染下一个 CSS：

html { font-size: 1rem; }

@media only screen and (min-width: 320px) { html { font-size: calc(0.625vw + 0.875rem); } }

@media only screen and (min-width: 1600px) { html { font-size: 1.5rem; } }

【讨论】：

【解决方案2】：

我不认为这是“最好的方法”，但这是我最近一直在做的事情：

以像素为单位设置基本尺寸。它将在不同浏览器中保持一致，并且更易于推理。
基线以像素为单位，元素的所有类型大小以 rem 为单位，然后只需重置媒体查询的基线大小（以像素为单位）。

这是 Trent Walton 撰写的一篇很棒的文章，它不太关注实施，而是更多地关注最佳实践，但我觉得它真的很有帮助：http://trentwalton.com/2012/06/19/fluid-type/

不确定我是否回答了您的问题，但这是一个非常深入的话题！

【讨论】：