為什么我的媒體查詢不適用？

Question

編輯為add ，所以沒有人將其發布為答案：我的代碼中已經有一個視口標簽。

---

我在這里已經閱讀了許多對類似問題的回答，並且可以確定我的問題可能是在查詢被聲明的順序中出現的，但是我一生都無法找出問題所在。

在這里啟動示例。

我有兩個div，一個應該以寬布局顯示，另一個應該以窄布局顯示。

<!-- for small layouts -->
<div class="container-fluid slogan text-center" id="home-slogan-container-small">
   small
</div>

<!-- for 800 px and wider -->
<div class="container-fluid slogan text-center" id="home-slogan-container-large">
   large
</div>

（這些內容非常精簡；實際內容在div中具有不同的布局。）

我遇到的問題是，無論我將瀏覽器縮放到什么尺寸（使用ctrl-shift-m在FF中進行測試以獲取移動視圖，在Chrome中使用開發工具中的移動視圖按鈕進行測試），顯示。

這是我的CSS：

#home-slogan-container-small {
    padding-top: 15px;
    text-align: center !important;
    display: none;
}

#home-slogan-container-large {
    padding-top: 15px;
    text-align: center !important;
    display: none;
}


@media only screen and (max-width: 1500px) {
        #home-slogan-container-small { display: none !important;}
        #home-slogan-container-large { display: block !important;}
}

@media only screen and (max-width: 1200px) {
    #home-slogan-container-small { display: none !important;}
    #home-slogan-container-large { display: block !important;}
}


@media only screen and (max-width: 960px) {
    #home-slogan-container-small { display: none !important;}
    #home-slogan-container-large { display: block !important;}
}

@media only screen and (max-width: 800px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}


@media only screen and (max-width: 799px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}

@media only screen and (max-width: 420px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}

@media only screen and (min-width: 300px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}

我是一個PHP / mySQL開發人員，上面有一個引導站點。 CSS不是我的強項。 任何解釋將不勝感激。

Answer 1

這是問題

@media only screen and (min-width: 300px) {
    #home-slogan-container-small { display: block !important;}
    #home-slogan-container-large { display: none !important;}
}

它是最小寬度 ...表示寬度大於該寬度的任何內容（例如所有瀏覽器）都將具有這些屬性。 將其更改為最大寬度，就可以了。

---

編輯：以下所有內容都是正確的，但不是@EmmyS問題的原因。 解決方案在上面。

我最近在Foundation遇到了這個問題，我懷疑bootstrap也有問題。 您的html 可能缺少元聲明：

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

將其添加到HTML的頭部，它可能會正常工作。 您遇到此問題的原因是因為移動瀏覽器正在決定“好吧，我不知道如何顯示該網站，因此即使我使用的是大型瀏覽器，也要對其進行擴展不。”

Answer 2

您必須刪除上一個媒體查詢

@media only screen and (min-width: 300px) {
   #home-slogan-container-small { display: block !important;}
   #home-slogan-container-large { display: none !important;}
}

原因是，這最后一個是唯一具有最小寬度規則的規則，並否決了所有規則（除非wieport <300px）

Answer 3

像這樣重寫所有樣式：

/* Styles for size 0px - 799px */
.small {
  display: block;
}

.middle {
  display: none;
}

.large {
  display: none;
}

/* Styles for size 800px - 1200px */
@media (min-width: 800px) {
  .small {
    display: none;
  }

  .middle {
    display: block;
  }

  .large {
    display: none;
  }
}


/* Styles for size 1200px and more */
@media (min-width: 1200px) {
  .small {
    display: none;
  }

  .middle {
    display: none;
  }

  .large {
    display: block;
  }
}

我選擇了800px和1200px作為斷點。 您可以修改它們或添加新的。