[JavaScript知识库]vue 中的媒体查询

先说一下 css3 中的媒体查询
语法
@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 {
       属性: 值 
    }
}

vue 与 css3 中的 媒体查询有点不同
在vue中是不能直接使用@media的，我们必须结合less或者sass来使用它
安装命令

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

npm install less less-loader --save-dev

可能遇到的问题
lass 或者 sass 版本过高,可以适当降低版本,对应 vue 与 脚手架的版本
使用
方法一:

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

方法二
写n套页面，在使用这些页面的组件中进行一次媒体查询
但是需要引入