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

Posted 2023-03-06

【中文标题】媒体查询最大宽度与视口大小或窗口大小有关？

【英文标题】：media query max-width relates to the view port size or the windows size?

【发布时间】：2012-10-22 08:13:53

【问题描述】：

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

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

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

当视口大小为 360 像素或窗口大小为 360 像素时，此媒体查询是否有效？

【参考方案1】：

这是视口。这在spec 中有说明：

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

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