我正在嘗試在 CSS 中使用 @media 東西，但遇到了一些問題。
這是我的 CSS 代碼（我有一個大螢屏）：
#headerImage {
width: 1000px;
height: 1000px;
}
1000 像素的標題影像正好適合我的大螢屏。但是由于我正在為公司制作網站，我必須考慮觀眾的螢屏尺寸，所以我研究了W3Schools并發現了@media 的事情。
那么，我把@media 的東西放到了我的 CSS 中。這是@media：
@media only screen and (max-height: 700px) {
#headerImage {
width: 500px;
height: 500px;
}
}
好的。我回到網站，并重新加載它。1000px. 好的。
現在，我將瀏覽器的高度調整為小于700px. （我把高度弄小了，所以它肯定是 < 700px）不。它仍然是1000px。
有什么問題嗎？
編輯：
注意：我使用的是 Chrome 版本 96.0.4664.110（官方版本）（x86_64）
這是我的一些 HTML：
<img id="headerImage" src="logo.png">
還有，你需要<meta>嗎？我這里有：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
uj5u.com熱心網友回復：
試試這個，一旦你也可以在移動設備上嘗試高度：100vh 是你想要全屏影像
#headerImage {
width: 100%;
height:100vh;
}
@media only screen and (max-height: 700px) {
#headerImage {
width: 100%;
height: auto;
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/400001.html