media query max-width是与视图端口大小还是窗口大小有关？ [英] media query max-width relates to the view port size or the windows size?

问题描述

我想知道媒体查询的最大宽度是否与视图端口大小或窗口大小有关？

例如，我有这个媒体查询：

  @media screen and（max-width：360px）{} 
  
 
 
 
此视图端口大小为360像素或窗口大小为360像素时，此媒体查询会处于活动状态吗？
解决方案
这是视口。这在规范中有所说明：
 
 
'width'媒体功能描述了输出设备的目标显示区域的宽度。对于连续媒体，这是视口的宽度（如CSS2，第9.1.1节[CSS21]所述），包括渲染滚动条的大小（如果有）。
 
 
这也适用于主浏览器视口中的子视口，例如frameset和iframes的子视口。因此，如果iframe的宽度不超过360像素，您的媒体查询也会在该iframe中应用。
 
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?
解决方案
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.

                        
这篇关于media query max-width是与视图端口大小还是窗口大小有关？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！