如何使用 css 修復響應式設計問題

Question

我正在創建一個響應式登陸頁面。 我在 CSS 中提到了不同屏幕尺寸的不同設置。 我已經提到了 3 種屏幕尺寸，即 max-width 320、max-width 375 和 max-width 780。然而，屏幕寬度為 320 的手機正在從 css 中獲取屏幕寬度 375px 的屬性。

<style>
@media only screen and (max-width: 320px)
{
div.auto-style16 {
height: 95px;
padding-top: 10px;
}
}


@media only screen and (max-width: 375px)
{
div.auto-style16 {
height: 55px;
padding-top: 0px;
}
}


@media only screen and (max-width: 780px)
{
div.auto-style16 {
height: 5px;
padding-top: 30px;
}
}
</style>

根據上面的代碼，最大寬度為 320 像素的手機應采用高度 95 像素。 同樣，最大寬度為 375 像素的手機應采用 55 像素的高度。 但是，最大寬度為 320 像素的手機的高度為 55 像素（實際上是最大寬度為 375 像素）。

Answer 1

正確的順序應該是這樣的：

@media only screen and (max-width: 780px) {
  div.auto-style16 {
    height: 5px;
    padding-top: 30px;
  }
}

@media only screen and (max-width: 375px) {
  div.auto-style16 {
    height: 55px;
    padding-top: 0px;
  }
}

@media only screen and (max-width: 320px) {
  div.auto-style16 {
    height: 95px;
    padding-top: 10px;
  }
}

Answer 2

媒體查詢的順序在 css 中很重要！ 點擊此處了解更多信息。

為什么媒體查詢的順序在 CSS 中很重要？

這意味着，如果您將兩個規則應用於相同的元素，它將選擇最后一個聲明的規則，除非第一個具有!important標記或更具體（例如 html > body vs just body，后者不太具體）。

Answer 3

我認為您需要花點時間分析一下您的代碼在做什么。

 @media only screen and (max-width: 320px)
{
div.auto-style16 {
height: 95px;
padding-top: 10px;
}
}

如果瀏覽器窗口大小達到 320 像素，則在塊內應用樣式

@media only screen and (max-width: 375px)
{
div.auto-style16 {
height: 55px;
padding-top: 0px;
}
}

這適用於最大寬度為 375 像素的窗口屏幕的樣式。 這里的問題是，如果屏幕寬度是 320 像素，那么它不大於 375 像素，因此媒體查詢中的樣式都會被應用，並且現有的樣式會按照解析的順序被覆蓋。 如果您希望某些樣式專門用於大於 320 像素但小於 375 像素的屏幕，那么您可以使用

@media only screen and (min-width: 320px) and (max-width: 375px)