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

Question

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

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

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

当视口(viewport)大小为 360px 或窗口大小为 360px 时，此媒体查询是否会起作用？

Answer 1

这是视口(viewport)。这在 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).

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