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.
只需像在CSS中那样组合媒体查询即可:
this.tablet = window.matchMedia('(min-width:767px) and (max-width: 992px)');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.