Issue with useMediaQuery({minWidth: <value>, maxWidth: <value>})

[tacmoktan]

const isLaptop = useMediaQuery({ minWidth: 992, maxWidth: 1199}); 

const isDesktop = useMediaQuery({ minWidth: 1200, maxWidth: 1919 }); 

console.log('laptop', isLaptop, 'desktop', isDesktop);

This will log laptop false desktop false in screensize 1199;

Expected output : laptop true desktop false

[yocontra]

Is this on the 8.x.x branch or the 9.x.x beta?

[yocontra]

As an aside - we're just generating CSS media queries so your issue is likely the inclusivity of them being confusing: https://stackoverflow.com/questions/13241531/what-are-the-rules-for-css-media-query-overlap

[tacmoktan]

This might be on 8.x.x as I installed it like 2 weeks ago.

By doing what I mentioned above, it breaks responsive design on 1199px . It works fine for other resolution below that though. But it breaks on exactly 1px below the breaking point( 1200px.)

Inorder to avoid breaking design at 1199px, I overlapped media queries like:

const isLaptop = useMediaQuery({ minWidth: 992, maxWidth: 1199}); 

const isDesktop = useMediaQuery({ minWidth: 1199, maxWidth: 1919 }); 

But the problem with this is, media query for isDesktop is included in both 1199px and 1200px. I think the issue is with maxWidth property.

[tacmoktan]

maxWidth: 1199px is not including 1199px.

[yocontra]

@tacmoktan My question (and why I linked the previous stackoverflow post) - have you tried this using a plain CSS media query, and is the result the same? If so - the issue is not this library, it is just how CSS media queries work - you need to overlap them sometimes for breakpoints like this (see the StackOverflow post for more info).

[tacmoktan]

Ok. I tried it. Seems like that's how CSS media query works. My bad. Thank you for your response.