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

Question

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

我没有使用任何地方，而是使用Vuedisplay: none的指令确定元素是否插入到 DOM 中。v-if

我已经这样设置了：

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

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

Answer 1

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

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