vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 使用媒体查询实现响应式

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

投稿:jingxian

这篇文章主要介绍了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;
}

组成:

一个可选的媒体类型,告诉浏览器这段代码是用在什么类型的媒体上的,具体的媒体类型如下:

一个或者多个媒体特性表达式,是一个被包含的CSS生效所需的规则或者测试,媒体特性数量众多,主要的有如下这么几个:

一组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套页面,在使用这些页面的组件中进行一次媒体查询

但是需要引入 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文