Question

我目前正在努力使我的网站响应。由于我必须使用媒体查询，我想知道这些方法中哪些更常见，或者更好，更容易在SCSS中读取/维护（内部的CSS值仅用于演示）。

示例1：

.foo {
  width : 10px;
  .bar {
    width : 20px;
  }
}

@media screen and (max-width : 20px) {
    .foo {
    width : 20px;
    .bar {
      width : 30px;
    }
  }
}

示例2：

.foo {
  width : 10px;
   @media screen and (max-width : 20px) {
      width : 20px;
   }
  .bar {
    width : 20px;
    @media screen and (max-width : 20px) {
      width : 30px;
   }
  }
}

示例3：

.foo {
  width : 10px;
   @media screen and (max-width : 20px) {
      width : 20px;
      .bar {
        width : 30px;
      }
   }
  .bar {
    width : 20px;
  }
}

我知道我可以使用mixins和函数而不是写下整个媒体查询，我更感兴趣的是放置它们。

Answer 1

A better option would be to create sass mixin for media query and use it 
e.g.
bp = Break point
@mixin bp-devices {
    @media (min-width: 767px) {
        @content;
    }
}

and use it as
footer {
    padding: 25px 0 14px;

    @include bp-devices { padding-bottom: 45px; }
}

Answer 2

@mixin min-max($resMin, $resMax) {
    @media (min-width: $resMin+px) and (max-width: $resMax+px) {
      @content;
    }
  }
  @mixin max($res) {
    @media (max-width: $res+px) {
      @content;
    }

  }
  @mixin min($res) {
    @media (min-width: $res+px) {
      @content;
    }
  }



.class-name {
    @include min(1200){
      width: 25%;
    }
   @include min-max(992,1199){
     width: 50%;
   }

    @include max(991){
      width: 100%;
    }
}

在Sass / Scss中放置媒体查询

2 个答案: