Question

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

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

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

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

Answer 1

这是视口。这在spec：

中说明

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

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