Menu
I'm wondering if the max-width of a media query is relates to the view port size or the windows size?
for example , I have this media query:
@media screen and (max-width: 360px){}
will this media query be in action when the view port size is 360px or the windows size 360px?
504
The min-width and max-width are media features that correspond to a certain media type that has been specified in the media query. The min-width specifies the minimum screen width of a specific device, meanwhile, The max-width media feature states the maximum screen width of a specific device.
Combining media query expressions Max-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide.
Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device. orientation (is the tablet/phone in landscape or portrait mode?)
Max-width : max -width means less than or equal to the width specified in that media query. So, in above example element which has “#ButtonWrapper” as the Id, will get width of 70% to all the screens widths which are less than or equal to 1024px.
It's the viewport. This is stated in the spec:
The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any).
This also applies to sub-viewports within the main browser viewport, such as those of framesets and iframes. So if an iframe has a width of 360px or less, your media query will also apply within that iframe.
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
