media query max-width是与视图端口大小还是窗口大小有关？

问题描述

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

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

  @media screen and（max-width：360px）{} 
  
 
 
 
此视图端口大小为360像素或窗口大小为360像素时，此媒体查询会处于活动状态吗？
解决方案
这是视口。这在中有所说明：
这也适用于主浏览器视口中的子视口，例如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:
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是与视图端口大小还是窗口大小有关？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！