媒体查询"/>
vue 中的媒体查询
先说一下 css3
中的媒体查询
媒体查询 (英文:Media queries ),这个特性非常的实用,尤其是需要根据设备的类型或者根据特定的特征和设备参数,来修改网站中的CSS样式。
语法
@media mediatype and|not|only (media feature) {CSS-Code;
}
组成:
一个可选的媒体类型,告诉浏览器这段代码是用在什么类型的媒体上的,具体的媒体类型如下:
- all:适用于所有设备(如果不写默认为all)。
- print:适用于在打印预览模式下在屏幕上查看的分页材料和文档。
- screen:主要用于屏幕。
- speech:主要用于语音合成器。.
一个或者多个媒体特性表达式,是一个被包含的CSS生效所需的规则或者测试,媒体特性数量众多,主要的有如下这么几个:
- aspect-ratio:用于检测视口的宽高比
- width:用于检测视口的宽度,可以使用前缀min-width和max-width分别查询最小值和最大值
- height:用于检测视口的高度,可以使用前缀min-height和max-height分别查询最小值和最大值
- orientation:用于检测视口的屏幕方向
- hover:根据用户当前的环境是否允许悬停在元素之上来应用不同的样式(例如电脑就可以进行悬悬停,触摸屏用户就无法进行悬停)
一组CSS规则,会在测试通过且媒体类型正确的时候应用。
下面是一般情况下通过宽度区分媒体途径的方法
//当屏幕最小宽度为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套页面,在使用这些页面的组件中进行一次媒体查询
但是需要引入
更多推荐
vue 中的媒体查询
发布评论