Search code examples
cssmedia-queriesviewport

media query max-width relates to the view port size or the windows size?

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?

Solution

  • 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.