768px以下的媒體查詢無法正常工作

Question

我正在為網頁編寫媒體查詢，並設法為768及以下版本編寫媒體查詢。 但是它不能正常工作。 我想捕獲320px的大多數手機（iphone4，iphone5，iphone3，華碩銀河7，三星銀河sII，三星銀河s3）的縱向視圖。 我創建的網頁適用於768px以上的像素，但不適用於768px以下的媒體查詢

@media (min-width:481px) and (max-width:768px) {
        .navbar-brand{
    margin-left: 80px;

        }}

      @media (min-width: 768px){ 
           .navbar-brand{
    margin-left: 100px;

    }
         @media (min-width: 991px){ 
        .navbar-brand{
    margin-left: 150px;

        }}

在此示例中，margin left屬性在min-width：768px和min-width：991px上工作得很好，但在@media（min-width：481px）和（max-width：768px）上不起作用。

Answer 1

您沒有關閉大括號min-width: 768px的大括號。 這是帶有格式設置的最終代碼，可以更輕松地查看它。

@media (min-width:481px) and (max-width:768px) {
    .navbar-brand {
        margin-left: 80px;
    }
}

@media (min-width: 768px) {
    .navbar-brand {
        margin-left: 100px;
    }
}

@media (min-width: 991px) {
    .navbar-brand{
        margin-left: 150px;
    }
}

為了捕獲具有特定邊距的320px (min-width:481px) and您可以刪除(min-width:481px) and從第一個媒體查詢中刪除(min-width:481px) and如果應應用相同的樣式）或添加針對該情況的媒體查詢：

@media (max-width: 320px) {
    .classname {
        enter some code here
    }
}

Answer 2

請查看並確認下面的媒體查詢以及更新的代碼。

      @media only screen and (min-width: 768px) { 
        .navbar-brand {
           margin-left: 100px;
         }
      }

      @media only screen (min-width: 481px) and (max-width:767px) {
        .navbar-brand {
           margin-left: 80px;
         }
      }