Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I am working with the matchMedia API to determine viewports within javascript, so I can minimize the amount of dom manipulation taking place.

Instead of using display: none everywhere I determine if elements are inserted into the DOM or not with a v-if directive from Vue.

I have set it up like this:

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

The mobile matchmedia query is fine but how do I determine exactly what is tablet size? I am wondering if I can combine max-width and min-width values within the matchMedia query.

Of course I could do something like this:

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

I am wondering is this is properly set up like this though.

like image 456
Stephan-v Avatar asked Dec 08 '22 17:12

Stephan-v


1 Answers

Just combine the media queries as you would do in CSS:

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

like image 112
Lars Beck Avatar answered Dec 10 '22 06:12

Lars Beck