CSS 中只有前兩個媒體查詢有效。 休息被忽略

Question

我確信我的問題有一個非常簡單的解決方案。

我有樹媒體查詢，但只有前兩個有效。 在手機上查看時，800px 只是被忽略了。

 div { color: yellow; font-size: 50px; } @media (max-width: 1200px) { div { color: red; } } @media (max-width: 1000px) { div { color: green; } } @media (max-width: 800px) { div { color: purple; } }

 <div>Hello</div>

Answer 1

將元標記添加到您的 html，並將初始比例設置為 1。

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

由於如果只是調整瀏覽器窗口的大小，代碼在桌面上運行良好，但不能使用 chrome 來模擬屏幕大小 - 所以這可能是模擬器的問題。 您必須將頁面加載到移動設備上或嘗試幾個不同的模擬器才能確定。