如何使我的頁面響應所有設備

Question

我試圖通過使用媒體查詢使我的頁面響應。 但是，該框並未響應所有媒體查詢。 我對媒體查詢的最小和最大寬度感到非常困惑，這是代碼，請有人向我建議如何使 box div 響應所有設備。 媒體查詢不適用於我在代碼中提到的各種屏幕尺寸。 比如768px media query適用於所有屏幕大小，我該怎么辦？

 .box { border: 10px solid forestgreen; height: 100vh; width: 100%; } @media only screen and (max-width: 768px) {.box { width: 100%; } } @media only screen and (max-width: 900px) {.box { width: 70%; } } @media only screen and (max-width: 1080px) {.box { width: 60%; } } @media only screen and (max-width: 1440px) {.box { width: 60%; } }

 <div class="box"></div>

Answer 1

考慮 400 像素的寬度。

• width: 100%; 適用，因為它在任何媒體查詢之外
• width: 100%; 適用，因為屏幕在 768px 的最大寬度范圍內
• width: 70%; 適用，因為屏幕在 900px 的最大寬度范圍內
• width: 60%; 適用，因為屏幕在 1080 像素的最大寬度范圍內
• width: 60%; 適用，因為屏幕在 1440px 的最大寬度范圍內

所以它最終有 60%。

沒有時間寬度在max-width: 768px內而不在max-width: 1440px內。

您需要考慮您的 styles 應用在哪個順序。

大多數人使用min-width而不是max-width並保持從最小到最大的順序。

Answer 2

您的 css 代碼是正確的，但 meta 部分會導致響應頁面出現問題。

在元部分中，您有“width=device-width, initial-scale=1.0”，您必須定義智能手機的所有可用尺寸，這是棘手且不可能的。 只是您需要在代碼中省略該部分。