vue如何使用媒体查询实现响应式

.styleClassName{
width:200px;
@media only screen and (min-width: 1200px) {
width:100px
}
}

<template>
    <div>
        <div class="pc">
            <!-- pc端页面-->
        </div>
        <div class="pad">
            <!-- pad端页面-->
        </div>
        <div class="mobile">
            <!-- 移动端页面-->
        </div>
    </div>
</template>

<style lang="sCSS" scoped>
//pc端
@media only screen and (min-width: 1200px) {
  .pc {
    display: block !important;
  }
  .pad {
    display: none !important;
    touch-action: auto !important;
  }
  .mobile {
    display: none !important;
    touch-action: auto !important;
  }
}
//pad端
@media only screen and (min-width: 768px) and(max-width: 1199px) {
  .pc {
    display: none !important;
  }
  .mobile {
    display: none !important;
    touch-action: auto !important;
  }
  .pad {
    display: block !important;
    touch-action: auto !important;
  }
}
// 手机端
@media only screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
  .mobile {
    display: block !important;
    touch-action: auto !important;
  }
  .pad {
    display: none !important;
    touch-action: auto !important;
  }
}
</style>

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

//当屏幕最小宽度为992px 
@media screen and (min-width : 992px) {
    body {
        属性: 值
    }
}
//当屏幕宽度 最小为768px 最大为991px时 
@media screen and (min-width:768px) and (max-width:991px) {
    body {
       属性: 值
    }
}
//当屏幕最大宽度为767px 
@media screen and (max-width:767px) {
    body {
       属性: 值 
    }
}

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

npm install less less-loader --save-dev

body{
    background-color:red;
    @media only screen and (max-width: 800px) {
    background-color:green;
  }
}