关于Sass响应式布局的使用方式（media媒体查询）

前言

当我们在做PC端页面的时候，免不了与响应式布局打交道。这篇文章就是为了记录一下我在工作中遇到的问题：如何使用sass来做响应式布局。

业务场景

假设此时有两个div，并排排列。在视窗宽度小于1000px的时候，变成竖直排列的状态。运行环境的话选择vue脚手架创建出来的项目。

然后创建vue文件。代码如下所示：

<template>
  <div class="media_test">
    <div id="box1">
      <p>这是box1</p>
    </div>
    <div id="box2">
      <p>这是box2</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Test"
}
</script>

<style scoped lang="scss">
#box1 {
  box-sizing: border-box;
  width: 50%;
  height: 300px;
  display: inline-block;
  background-color: coral;
  color: white;
  padding: 10px;
}

#box2 {
  box-sizing: border-box;
  width: 50%;
  height: 300px;
  display: inline-block;
  background-color: mediumpurple;
  color: white;
  padding: 10px;
}
</style>

运行结果如图：

如果我们想要在1000px以下的时候，让两个div上下叠在一起的话，用媒体查询我们需要这么写：

@media screen and (min-width: 1000px){
  #box1 {
    box-sizing: border-box;
    width: 50%;
    height: 300px;
    display: inline-block;
    background-color: coral;
    color: white;
    padding: 10px;
  }
  #box2 {
    box-sizing: border-box;
    width: 50%;
    height: 300px;
    display: inline-block;
    background-color: mediumpurple;
    color: white;
    padding: 10px;
  }
}
@media screen and (min-width: 375px) and (max-width: 999px){
  #box1 {
    box-sizing: border-box;
    width: 100%;
    height: 150px;
    background-color: coral;
    color: white;
    padding: 10px;
    font-size: 14px;
  }
  #box2 {
    box-sizing: border-box;
    width: 100%;
    height: 150px;
    background-color: mediumpurple;
    color: white;
    padding: 10px;
    font-size: 14px;
  }
}

在1000px下的运行结果如图：

将公共代码抽取进@mixin中

但是，很显然这么写的话过于繁琐。那我们可以将这些公共代码抽取出来作为@mixin函数，然后传入参数，再使用参数作为判断条件选择使用不同的css代码；

代码改造如下：

@mixin boxStyle ( $screenWidth ){
  #box1 {
    @if ( $screenWidth == 1600) {
      display: inline-block;
      width: 50%;
      height: 300px;
      font-size: 16px;
    }@else if( $screenWidth == 1000 ) {
      width: 100%;
      height: 150px;
      font-size: 14px;
    }
    box-sizing: border-box;
    background-color: coral;
    color: white;
    padding: 10px;
  }
  #box2 {
    @if ( $screenWidth == 1600) {
      display: inline-block;
      width: 50%;
      height: 300px;
      font-size: 16px;
    }@else if( $screenWidth == 1000 ) {
      width: 100%;
      height: 150px;
      font-size: 14px;
    }
    box-sizing: border-box;
    background-color: mediumpurple;
    color: white;
    padding: 10px;
  }
}

@media screen and (min-width: 1000px){
  @include boxStyle( 1600 );
}
@media screen and (min-width: 375px) and (max-width: 999px){
  @include boxStyle( 1000 );
}

这个代码的话还可以再继续拆分，抽取公共代码，但是就太繁琐了，这里就没必要演示了。

接下来还有第二种方法：

sass中的@media嵌套

在sass中，@media标签经过了处理，既可以像普通的media标签一样使用。还具有sass赋予的独特的能力——可以在css规则中嵌套。具体的使用方法可以参见官网： sass中的@media。

还是上面的例子，我们可以这么写：

#box1 {
  @media screen and (min-width: 1000px){
    display: inline-block;
    width: 50%;
    height: 300px;
    font-size: 16px;
  }
  @media screen and (min-width: 375px) and (max-width: 999px){
    width: 100%;
    height: 150px;
    font-size: 14px;
  }
  box-sizing: border-box;
  background-color: coral;
  color: white;
  padding: 10px;
}
#box2 {
  @media screen and (min-width: 1000px){
    display: inline-block;
    width: 50%;
    height: 300px;
    font-size: 16px;
  }
  @media screen and (min-width: 375px) and (max-width: 999px){
    width: 100%;
    height: 150px;
    font-size: 14px;
  }
  box-sizing: border-box;
  background-color: mediumpurple;
  color: white;
  padding: 10px;
}

运行结果的话和之前是一模一样的。

结语

这两种方法都可以让我们最大程度的精简代码。但是具体孰优孰劣我暂时还没有定夺。如果你觉得哪种方式更好，或者有什么建议的话可以在评论区告诉我。最后，无论是sass，还是@media标签，还是响应式布局。都有太多需要学习的地方了。希望自己以后懂的东西越来越多吧