问题:如何在matchMedia查询中结合max-width,min-width?

我正在使用matchMediaAPI 来确定 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 查询很好,但我如何确定平板电脑的大小?我想知道是否可以在 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)');