使用媒体查询实现响应式的两种方式
前提
1.在每个组件中为其使用媒体查询
2.写n套页面,在使用这些页面的组件中进行一次媒体查询
vue中的媒体查询
语法
使用媒体查询实现响应式的两种方式 前提依赖：
sass,sass-loader
1.在每个组件中为其使用媒体查询这种方法的有点是减少了重写不同终端同一组件的工作量,缺点是每个组件都要使用媒体查询,当一套页面组件不同时,需要进行组件的显示与隐藏(display:none!important),在不同终端区别不大的情况下建议使用这种方法.
例如:
.styleClassName{
width:200px;
@media only screen and (min-width: 1200px) {
width:100px
}
}
2.写n套页面,在使用这些页面的组件中进行一次媒体查询
这种方法的优点是媒体查询比较方便,缺点是在多终端相似度较高的情况下,要写几套重复页面.
因此,此方式适宜在多终端之间差异较大的情况下使用.
示例：
<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>
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套页面，在使用这些页面的组件中进行一次媒体查询
但是需要引入
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。