在 CSS 媒體查詢中使用的高度（如 @media screen and (max-height: 800px)) 對應的是視口的高度，而不是 window.screen.height。視口高度是指瀏覽器視窗內可見內容區域的高度，不包括瀏覽器的工具欄、位址列等非內容區域。
具體解釋
@media screen and (max-height: 800px)是媒體查詢，它針對視口的高度進行響應式設計。視口的高度指的是瀏覽器視窗內顯示頁面內容的區域高度，可以透過window.innerHeight或document.documentElement.clientHeight獲取。window.screen.height是整個螢幕的高度，包括作業系統的工作列、瀏覽器的工具欄等所有元素的高度。這個值一般不用於媒體查詢，因為它不能準確反映瀏覽器內容區域的高度。
示例程式碼
下面是一個示例，演示如何使用媒體查詢基於視口高度進行響應式設計：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Query Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.box {
width: 100%;
height: 300px;
background-color: lightblue;
text-align: center;
line-height: 300px;
}
@media screen and (max-height: 800px) {
.box {
background-color: lightcoral;
line-height: normal;
padding-top: 20px;
}
}
</style>
</head>
<body>
<div>Resize the window height to see the effect</div>
</body>
</html>
在上面的程式碼中，當視口高度小於或等於 800px 時，.box 的背景顏色會變為 lightcoral，並且文字對齊方式會改變。
檢查視口高度
你可以在 JavaScript 中檢查視口高度，並在控制檯中輸出，以便更好地理解它與 window.screen.height 的區別：
console.log("Viewport height (window.innerHeight): " + window.innerHeight);
console.log("Viewport height (document.documentElement.clientHeight): " + document.documentElement.clientHeight);
console.log("Screen height (window.screen.height): " + window.screen.height);
執行這段程式碼，可以看到視口高度和螢幕高度的不同。
總結
媒體查詢中的高度（如 @media screen and (max-height: 800px)）對應的是視口高度，而不是螢幕高度 (window.screen.height)。視口高度是瀏覽器視窗內可見內容區域的高度，是響應式設計時常用的尺寸標準。
