Javascript 如何在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;
}

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

mobile matchmedia查询很好，但如何确定平板电脑的确切尺寸？我想知道是否可以在matchMedia查询中组合

max width

和

min width

值

当然我可以这样做：

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;
}

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（'（最小宽度：767px）和（最大宽度：992px）'）