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

Question

我正在使用 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;
}

移动匹配媒体查询没问题，但我如何确定平板电脑的确切尺寸？我想知道我是否可以在 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)');

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

How to combine max-width, min-width in matchMedia query?

javascript

matchmedia

vue.js