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

Posted 2023-03-06

【中文标题】带有 rem 的响应式排版 - 以 % 或 px 为单位的基线字体大小？

【英文标题】：Responsive Typography with rem - Baseline fontsize in % or 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%（可以设置为一个完全奇怪的值）。

【参考方案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*100vw #$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/

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