萨斯地图 - 响应排版

Question

我想写一个萨斯地图使我的标题响应。

我经常使用http://type-scale.com/来设置我的标题字体大小，例如，使用我的h1将是3.998rem。

问题在于手机尺寸太大。

你可以编写h1到h6的媒体查询，但那会是太多的代码。

我已经写了一个仅适用于h1标签的示例，但是如何在不写多个贴图的情况下使h1工作到h6？

干杯

SASS

$headers-responsive: (
    null: 1rem, 
    480px: 1.5rem, 
    768px: 2rem, 
    992px: 3rem, 
    1200px: 4rem 
); 

@mixin font-scale($font-scaler) { 
    @each $breakpoint, $value in $font-scaler { 
     @if($breakpoint == null) { 
      font-size: $value; 
     } @else { 
      @media (min-width: $breakpoint) { 
       font-size: $value; 
      } 
     } 
    } 
} 

h1 { 
    @include font-scale($headers-responsive); 
} 

CSS

h1 { 
font-size:1rem; 
} 

@media (min-width:480px) { 
h1 { 
    font-size:1.5rem; 
} 
} 

@media (min-width:768px){ 
h1 { 
    font-size:2rem; 
} 
} 

@media (min-width:992px){ 
h1 { 
    font-size:3rem; 
} 
} 

@media (min-width:1200px){ 
h1 { 
    font-size:4rem; 
} 
} 

Answer 1

如何将 “倍增” 参数设置为font-scale()？

说你要h2是的h1 80％，h3是的h1 60％：

... 

@mixin font-scale($font-scaler, $multiplier: 1) { 
    @each $breakpoint, $value in $font-scaler { 
     @if($breakpoint == null) { 
      font-size: $value * $multiplier; 
     } @else { 
      @media (min-width: $breakpoint) { 
       font-size: $value * $multiplier; 
      } 
     } 
    } 
} 

h1 { 
    @include font-scale($headers-responsive); 
} 

h2 { 
    @include font-scale($headers-responsive, .8); 
} 

h3 { 
    @include font-scale($headers-responsive, .6); 
}