Question

您好，我是SCSS的初学者，我仍然在学习它，并且发现它非常独特，可以在不久的将来需要动态设计时提供帮助。

我很好奇您是否可以将设备的宽度作为变量调用，以便一旦检测到设备的宽度就可以设置媒体查询。

如果可能，如何？除了HTML和CSS，我还需要SCSS吗？谢谢！

$hamb: 991px;
$mmenu: 992px;

@if max-width <= $hamb {
.hamburger{
    display:block;
}
.m-menu{
    display:none;
}
}

@else if max-width >= $menu {
.hamburger{
    display:none;
}
.m-menu{
    display:block;
}
}

Answer 1

在SCSS中尝试此代码以检测设备的宽度

$hamb: 991px;
$mmenu: 992px;
    @media screen and (max-width: $hamb){
        .hamburger{
            display:block;
        }
        .m-menu{
            display:none;
        }
    }
    @media screen and (min-width: $menu) {
        .hamburger{
            display:none;
        }
        .m-menu{
            display:block;
        }
    }

Answer 2

Media Query是否适用取决于视口的宽度。在您的（S）CSS中，您必须确定在默认情况下该怎么做，并且每个MQ的 if 条件为true，然后在浏览器中CSS是否适用，具体取决于在当前条件下。 MQ等于ifs条件（您也具有and，or和not组合）。

在Mobile First方法中，您只需要1个媒体查询和1个变量：

<template>
  <div>
    <v-btn @click="clickButton">Test Websocket</v-btn>
    <h1>Total webhooks : {{total}}</h1>
    <ul v-for="(log,index) in logs" :key=index >
      <li>{{index}} - {{ log }}</li>
    </ul>
  </div>
</template>

<script>
    export default {
      data () {
        return {
          logs: [],
          newlog: '',
          total:0
        }
      },
      methods: {
        clickButton: function () {
          this.$socket.send('Let me ask you a questin.can u hear me???')
        }
      },
      created () {
        this.$options.sockets.onmessage = (data) => {
          console.log(data)
          this.logs.push(data.data)
        }
      },
    }
</script>

默认情况下，所有MQ之外的前2条规则都适用。
在MQ中遵循2条规则将覆盖以前的规则，因为1 /它们具有相同的选择器和属性，并且2 /具有相同的特异性，并且在之后。

您可以在SCSS中将设备的宽度作为变量调用吗？

2 个答案: