阅读 507

关于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>

复制代码

运行结果如图:

媒体查询之前.png

如果我们想要在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下的运行结果如图:

小于1000px.jpg

将公共代码抽取进@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标签,还是响应式布局。都有太多需要学习的地方了。希望自己以后懂的东西越来越多吧

文章分类
前端
文章标签