将媒体查询保存在变量中 [英] Save media query in variable

问题描述

是否可以将媒体查询另存为变量?

Is it possible to save a media query as a variable?

这不起作用:

$max: @media (max-width: 980px) and (min-width: 768px);

我不是在寻找如何保存最大宽度和最小宽度，而是整个字符串.

I'm not looking for how to save max-width and min-width, but the whole string.

推荐答案

使用类似的内容

  @mixin respondTo($media) {
    @if $media == smallScreen {
      @media only screen and (max-width: $screenSmall - 1) { @content; }
    } @else if $media == mediumScreen {
      @media only screen and (max-width: $screenMedium) and (min-width: $screenSmall) { @content; }
    } @else if $media == largeScreen {
      @media only screen and (min-width: $screenXlarge) { @content; }
    }
  }

然后您可以执行以下操作:

Then you can do something like the following:

.products {
  @include respondTo(smallScreen) {
    width: 300px;
  }

  @include respondTo(mediumScreen) {
    width: 700px;
  }
}

这篇关于将媒体查询保存在变量中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！