vue框架下scss 媒体查询

在Vue框架下使用SCSS（SASS）进行媒体查询，可以通过以下步骤来实现：

1. 处理SCSS

首先，需要在项目中安装node-sass和sass-loader，可以使用以下命令安装：

npm install node-sass sass-loader --save-dev

安装完成后，需要在Vue组件的style标签中使用lang属性指定为"scss"，以使用SCSS进行样式编写。

2. 编写媒体查询

在scss中编写媒体查询可以使用@media规则，例如：

.test {
  color: red;
  
  @media screen and (min-width: 768px) {
    color: blue;
  }
}

上述示例代码中，首先为.test元素设置color为红色，然后在@media规则中设置了一个媒体查询，当屏幕宽度达到768px时，将color设置为蓝色。

3. 在Vue组件中使用

最后，在Vue组件中通过class或者style属性来应用scss中的样式，例如：

<template>
  <div class="test">Hello, World!</div>
</template>

<style lang="scss">
.test {
  color: red;
  
  @media screen and (min-width: 768px) {
    color: blue;
  }
}
</style>

上述示例代码中，在template模板中使用了一个div元素，并为其指定class为test，同时在style标签中使用了SCSS编写了一段样式代码，其中包含了一个媒体查询。这样就能够在Vue组件中使用SCSS进行媒体查询了。