媒体查询max-width与视口大小或窗口大小有关？

Question

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

例如,我有这个媒体查询:

@media screen and (max-width: 360px){}

当视口大小为360px或窗口大小为360px时,此媒体查询是否会生效？

Answer 1

这是视口.这在规范中说明:

"宽度"媒体功能描述了输出设备的目标显示区域的宽度.对于连续媒体,这是视口的宽度(如CSS2,第9.1.1节[CSS21]所述),包括渲染滚动条的大小(如果有的话).

这也适用于主浏览器视口中的子视口,例如框架集和iframe的子视口.因此,如果iframe的宽度为360px或更低,则您的媒体查询也将应用于该iframe.