Как объединить max-width, min-width в запросе matchMedia?

Question

Я работаю с API matchMedia, чтобы определить области просмотра в javascript, поэтому я могу минимизировать количество манипуляций с dom.

Вместо того, чтобы использовать display: none везде я определяю, вставлены ли элементы в DOM или нет v-if директива от Vue.

Я настроил это так:

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 значения в запросе matchMedia.

Конечно, я мог бы сделать что-то вроде этого:

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)');