薩斯地圖 - 響應排版

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); 
}