爲什麼我的媒體查詢不響應？

我無法讓媒體按預期工作。我想有一個類似的結果到自舉的網格系統如下：爲什麼我的媒體查詢不響應？

第一種情況：當寬度等於或大於992px更大：

三個相同COL-4型含列不同的段落
第二種情況：當寬度768px和991px之間：

兩個相同的col-6色譜柱，第三個色譜柱是col-12型色譜柱（明顯低於兩個色譜柱）。
第三種情況：當寬度等於或小於767px：

三個相同COL-12型柱堆疊在彼此之上。

我有比我應該得到的休息時間工作比較麻煩，但我不知道我的生活，我要去哪裏錯了。

這是我的代碼。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Our Menu</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet"> 
 
    <style> 
 
    /***Base Styles***/ 
 
    * { 
 
     box-sizing: border-box; 
 
    } 
 
    body { 
 
     font-family: 'Sansita', sans-serif; 
 
     letter-spacing: 1.5px; 
 
     background-color: beige; 
 
    } 
 
    .restaurant { 
 
     margin: 0 20px 0 20px; 
 
    } 
 
    h1 { 
 
     font-size: 50px; 
 
     text-align: center; 
 
     margin-bottom: 70px; 
 
     margin-top: 60px; 
 
    } 
 
    h2 { 
 
     font-size: 25px; 
 
     text-align: center; 
 
     border: 2px solid black; 
 
     padding-bottom: 3px; 
 
     width: 180px; 
 
    } 
 
    p { 
 
     padding: 35px 10px 10px 10px; 
 
    } 
 
    #meal1, 
 
    #meal2, 
 
    #meal3 { 
 
     background-color: khaki; 
 
     border: 2px solid black; 
 
     margin-bottom: 20px; 
 
    } 
 
    .meal1 { 
 
     background-color: #F4C2C2; 
 
    } 
 
    .meal2 { 
 
     background-color: #B22222; 
 
    } 
 
    .meal3 { 
 
     background-color: grey; 
 
    } 
 
    @media (min-width: 992px) { 
 
     #meal1 { 
 
     width: 32%; 
 
     float: left; 
 
     margin-right: 25px; 
 
     } 
 
     #meal2 { 
 
     width: 32%; 
 
     float: left; 
 
     } 
 
     #meal3 { 
 
     width: 32%; 
 
     float: left; 
 
     margin-left: 25px; 
 
     } 
 
    } 
 
    /***Tablet Styles***/ 
 
    @media (min-width: 768) and (max-width: 991px) { 
 
     #meal1 { 
 
     width: 48.46%; 
 
     float: left; 
 
     margin-right: 10px; 
 
     margin-bottom: 20px; 
 
     } 
 
     #meal2 { 
 
     width: 48.46%; 
 
     float: left; 
 
     margin-left: 10px; 
 
     margin-bottom: 20px; 
 
     } 
 
     #meal3 { 
 
     width: 100%; 
 
     float: left; 
 
     } 
 
    } 
 
    /***Mobile Styles***/ 
 
    @media (max-width: 767) { 
 
     #meal1, 
 
     #meal2, 
 
     #meal3 { 
 
     width: 100%; 
 
     } 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="restaurant"> 
 
    <h1>Our Menu</h1> 
 
    <div class="meals"> 
 
     <div id="meal1"> 
 
     <h2 class="meal1">Smoked Fish</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et tellus dictum, accumsan nunc sit amet, porttitor turpis. Phasellus orci felis, accumsan eu cursus ac, venenatis non massa. Mauris eget nisi pellentesque, luctus quam a, lacinia augue.</p> 
 
     </div> 
 
     <div id="meal2"> 
 
     <h2 class="meal2">Spicy Coppa</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et tellus dictum, accumsan nunc sit amet, porttitor turpis. Phasellus orci felis, accumsan eu cursus ac, venenatis non massa. Mauris eget nisi pellentesque, luctus quam a, lacinia augue.</p> 
 
     </div> 
 
     <div id="meal3"> 
 
     <h2 class="meal3">Fregola Salda</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et tellus dictum, accumsan nunc sit amet, porttitor turpis. Phasellus orci felis, accumsan eu cursus ac, venenatis non massa. Mauris eget nisi pellentesque, luctus quam a, lacinia augue.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-02-04 Collins Orlando

使用a validator。你的CSS中有機器可檢測的錯誤。

@media (min-width: 768) and (max-width: 991px) {

您已重複地（儘管不是普遍）規定的非零長度沒有單位。這會導致CSS無效，因此將被忽略。

來源

2017-02-04 13:15:39 Quentin

哦，血腥地獄。我到底是怎麼想的？現在我看到驗證者的重要性。謝謝@Quentin！ –

爲什麼我的媒體查詢不響應？

回答

相關問題