如何在matchMedia查询中组合最大宽度，最小宽度？

Question

我正在使用matchMedia API来确定javascript中的视口，因此我可以最大程度地减少dom操作的发生。

display: none我没有使用v-ifVue 的指令来确定是否将元素插入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;
}

可以使用移动Match媒质查询，但是如何确定平板电脑的尺寸呢？我想知道是否可以在matchMedia查询中合并max-width和min-width值。

我当然可以做这样的事情：

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

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

Answer 1

只需像在CSS中那样组合媒体查询即可：

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