css - 媒体查询最大宽度与视口大小或窗口大小有关？

Question

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

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

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

当视口大小为 360 像素或窗口大小为 360 像素时，此媒体查询会起作用吗？

Answer 1

是视口。这在规范中有说明：

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

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