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

我正在使用matchMediaapi来确定javascript中的viewport，因此可以最小化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查询很好，但如何确定平板电脑的大小？我想知道是否可以在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;
}

我想知道这是不是像这样设置的。

最佳答案

只需像在css中那样组合媒体查询：
this.tablet = window.matchMedia('(min-width:767px) and (max-width: 992px)');