Media max-width vs min-width , shift 1 px

Question

what is right settings when using max-width vs min-width

max-width(99px) and min-width(100px) (what about 1px between then?) or max-width(100px) and min-width(100px) (which will be applied for 100px here? )

Answer 1

If you're going to use media-queries on a specific element and target both max and min-width , you should use the same pixel value for each. For example, the min-width: 800px specify the styles when over 800px in screen width. max-width: 800px specifies the style changes on 800px and below. Using the same value for both queries insures that the specified styles are executed.

So in your example, the 1px between won't be a factor because there are no pixels between 99 and 100px and you have styles specified for both. If you used 798px instead of 799 there would be 1px where the element defaults to the non-media styles (if any).

Note: the max-width styles will prioritize over the min-width styles if using the same value when at 800px .

 @media only screen and (min-width: 800px) { img { width: 100vw; height: 100vh; } } @media only screen and (max-width: 800px) { img { width: 50vw; height: 50vw; }.img { height: 100vh; display: flex; align-items: center; justify-content: center; } }

 <div class="img"> <img src="https://dummyimage.com/600x400/000/fff"> </div>