html - 如何使用 SASS 在各种屏幕宽度上更改 Bootstrap 4 标题字体大小？

Question

目标非常简单:我需要针对不同的屏幕尺寸使用不同的字体大小。我正在努力在这里巧妙地编码，但它并没有像我预期的那样工作。经过研究，我唯一想到的是查询和变量如何相互影响之间可能存在问题，但我不确定。这是我尝试期望它起作用的方法:

@media (max-width: 768px) {
    $h1-font-size:                $font-size-base * 1.944;
    $h2-font-size:                $font-size-base * 1.555;
    $h3-font-size:                $font-size-base * 1.333 !default;
    $h4-font-size:                $font-size-base * 1.222 !default;
    $h5-font-size:                $font-size-base * 1.111 !default;
    $h6-font-size:                $font-size-base !default;

    .mixin-testix {
        font-size: 40px;
    }
} 


@media (min-width: 768px) and (max-width: 992px) {
    $h1-font-size:                $font-size-base * 2.222;
    $h2-font-size:                $font-size-base * 1.777;
    $h3-font-size:                $font-size-base * 1.388 !default;
    $h4-font-size:                $font-size-base * 1.222 !default;
    $h5-font-size:                $font-size-base * 1.111 !default;
    $h6-font-size:                $font-size-base !default;    
} 


@media (max-width: 992px) and (max-width: 1200px) {
    $h1-font-size:                $font-size-base * 2.777;
    $h2-font-size:                $font-size-base * 2.222;
    $h3-font-size:                $font-size-base * 1.666 !default;
    $h4-font-size:                $font-size-base * 1.222 !default;
    $h5-font-size:                $font-size-base * 1.111 !default;
    $h6-font-size:                $font-size-base !default;
} 

Answer 1

您不能重新分配@media 查询中的变量值，但您可以使用@media 查询中的变量值。例如，

@media (min-width: 768px) and (max-width: 991.98px) {
    h1, .h1 { font-size: $font-size-base * 2.222; }
    h2, .h2 { font-size: $font-size-base * 1.777; }
    h3, .h3 { font-size: $font-size-base * 1.388; }
    h4, .h4 { font-size: $font-size-base * 1.222; }
} 

演示:https://www.codeply.com/go/8wiWhxkaFZ

---

另请注意:您最大的媒体查询中存在拼写错误。它应该是 min-width 而不是 max-width。

@media(最小宽度:992px)和(最大宽度:1200px){