vue中安装使用媒体查询1、安装scss2、src下新建一个style/index.scss文件，写入以下代码：3、在m

1、安装scss

npm install node-sass --save-dev 		//安装node-sass 
npm install sass-loader@7.3.1 --save-dev //安装sass-loader指定版本，版本过高会报错，需要手动修改
npm install style-loader --save-dev 		//安装style-loader

2、src下新建一个style/index.scss文件，写入以下代码：

body {  @media only screen and (max-width:1920px) {  
  width: 100%;  
  font-size: 14px; 
   background-color: blue;  
  .box {    
  height: 100px;  
    width: 1900px;  
   color: red;  
  } 
 } 
 @media only screen and (max-width:1680px) {  
  width: 100%;  
  font-size: 14px; 
   background-color: green($color: #c2a4a4); 
 }  @media only screen and (max-width:1440px) {   
 width: 100%;  
 font-size: 14px;   
 background-color: #3334;  
  .box {     
 height: 100px;    
  width: 1440px;    
  color: red;    
} 
 }
  @media screen and (max-width: 1366px) { 
   width: 100%;   
 background-color: yellow; 
   font-size: 13px; 
 } 
 @media only screen and (max-width: 1280px) { 
   width: 100%;    
font-size: 13px;   
 background-color: orange; 
 } 
 @media only screen and (max-width: 524px) { 
   height: 100px;  
  width: 100%;    
font-size: 12px;   
 background-color: yellow;   
 .box {    
  height: 50px;   
   width: 100%;   
   background: pink   
 } 
 }
}

3、在main.js里引入：

import "@/style/index.scss"

4、注意：用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面！