【问题标题】:How can i change variable value when i use media queries and scss使用媒体查询和 scss 时如何更改变量值
【发布时间】:2021-01-11 00:02:17
【问题描述】:

我的网站中有相同的字体大小变量。 当我在 scss 中使用媒体查询时,我想更改此变量的值...我该怎么做... 以下方式不存在...

@media screen and (min-width:1000px){
 $font-sm:      13px;
 $font-default: 15px;
 $font-md:      18px;
}
@media screen and (max-width:999px){
 $font-sm:      10px;
 $font-default: 12px;
 $font-md:      14px;
}

【问题讨论】:

    标签: variables sass media-queries font-size


    【解决方案1】:

    改用自定义属性。

    @media screen and (min-width: 400px) {
      :root {
        --font-sm: 13px;
        --font-default: 15px;
        --font-md: 18px;
      }
    }
    
    @media screen and (max-width: 800px) {
      :root {
        --font-sm: 10px;
        --font-default: 12px;
        --font-md: 14px;
      }
    }
    
    body {
      font-size: var(--font-default);
    }
    

    【讨论】:

      猜你喜欢
      • 2020-01-25
      • 2018-06-30
      • 2013-09-06
      • 1970-01-01
      • 2020-06-01
      • 2020-06-20
      • 2013-06-30
      • 1970-01-01
      • 2019-08-14
      相关资源
      最近更新 更多