为什么我的媒体查询不响应？

我无法让媒体按预期工作。我想有一个类似的结果到自举的网格系统如下：为什么我的媒体查询不响应？

第一种情况：当宽度等于或大于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！ –

为什么我的媒体查询不响应？

回答

相关问题