当前位置：首页 > news >正文

使用scss简化媒体查询

news 来源：原创 2025/4/22 23:51:57

在进行媒体查询的编写的时候，我们可以利用scss与与编译器，通过@include混入的方式对代码进行简化，从而大大提高了代码的可维护性，也减少了代码的编写量，废话不多说，直接上代码：

// 断点列表 相当于js中的数组，只不过这里数组用()表示
$breakpoints: (
  "phone": (
    320px,
    480px,
  ),
  "pad": (
    481px,
    768px,
  ),
  "notebook": (
    769px,
    1024px,
  ),
  "pc": (
    1025px,
    1200px,
  ),
  // 大屏
  "tv": 1201px,
);
// 混合
@mixin respond-to($breakname) {
  // map-get函数可以拿到上面定义的map数组中的值
  $bp: map-get($breakpoints, $breakname);
  // type-of用于判断上面的键是否是数组/列表类型
  @if type-of($bp) == "list" {
    $min: nth($bp, 1); // 拿到设备尺寸的最小值, 列表中的第一个值
    $max: nth($bp, 2); // 拿到设备尺寸的最大值, 列表中的第二个值
    // >= 最小值  and  <= 最大值
    @media (min-width: $min) and (max-width: $max) {
      // 类似于vue中的插槽，在此处挖一个坑，外面可以往里面传入不同的css样式
      // 比如：下面代码示例中传入的是heigth的值
      @content;
    }
  } @else {
    @media (min-width: $bp) {
      @content;
    }
  }
}

// 编写scss代码
.header {
  display: flex;
  width: 100%;
  background-color: pink;
  @include respond-to("phone") {
    height: 50px;
  }
  @include respond-to("pad") {
    height: 60px;
  }
  @include respond-to("notebook") {
    height: 80px;
  }
  @include respond-to("pc") {
    height: 100px;
  }
  @include respond-to("tv") {
    height: 200px;
  }
}

最终编译的结果：

.header {
  display: flex;
  width: 100%;
  background-color: pink;
}

@media (min-width: 320px) and (max-width: 480px) {
  .header {
    height: 50px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .header {
    height: 60px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .header {
    height: 80px;
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .header {
    height: 100px;
  }
}

@media (min-width: 1201px) {
  .header {
    height: 200px;
  }
}