如何在matchMedia查询中组合max-width,min-width?

时间:2017-07-25 08:20:45

标签: javascript vue.js matchmedia

我正在使用matchMedia API来确定javascript中的视口,因此我可以最大限度地减少dom操作的数量。

我没有在任何地方使用display: none,而是使用来自Vue的v-if指令确定是否将元素插入到DOM中。

我已经设置了这样:

resize() {
    this.mobile = window.matchMedia('(max-width: 767px)').matches;
    this.tablet = window.matchMedia('(max-width: 767px)').matches;
    this.desktop = window.matchMedia('(min-width: 992px)').matches;
}

移动匹配媒体查询很好,但我如何确定平板电脑的大小呢?我想知道我是否可以在matchMedia查询中合并max-widthmin-width值。

当然我可以这样做:

resize() {
    this.mobile = window.matchMedia('(max-width: 767px)').matches;
    this.desktop = window.matchMedia('(min-width: 992px)').matches;
    this.tablet = !this.mobile && !this.desktop;
}

我很想知道这是否正确设置。

1 个答案:

答案 0 :(得分:3)

只需像在CSS中一样组合媒体查询:

this.tablet = window.matchMedia('(min-width:767px) and (max-width: 992px)');