媒體查詢最大寬度與視圖端口大小或窗口大小有關？

Question

我想知道媒體查詢的最大寬度是否與視圖端口大小或窗口大小有關？

例如，我有這種媒體查詢：

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

將在媒體查詢在行動時，視口的尺寸是640x360像素或窗口的大小爲360px？

Answer 1

這是視口。這在spec中說明：

「寬度」介質功能描述了輸出設備的目標顯示區域的寬度。對於連續媒體，這是視口的寬度（如CSS2，第9.1.1節[CSS21]所述），包括渲染滾動條的大小（如果有的話）。

這也適用於主瀏覽器視口內的子視口，例如框架集和iframe的子視口。因此，如果iframe的寬度爲360px或更小，則您的媒體查詢也將應用於該iframe中。