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 (min-width: 992px) and (max-width: 1200px) {

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

1 个答案: