为什么我的媒体查询没有响应？
[英]Why aren't my media queries responding?
问题描述
I'm having trouble getting my media breaks to work as expected. 
我无法让媒体休息按预期方式工作。 I would like to have a similar results to Bootstrap's grid system as follows: 我希望得到与Bootstrap的网格系统类似的结果，如下所示：
First case: When the width is equal or greater than 992px:
第一种情况：当宽度等于或大于992px时： Three identical col-4 type columns containing the different paragraphs
三个相同的col-4类型列，包含不同的段落 Second case: When the width is between 768px and 991px:
第二种情况：当宽度在768px至991px之间时： Two identical col-6 columns, with the third one being a col-12 type column (obviously below the two).
两列相同的col-6列，第三列为col-12类型的列（显然在两列之下）。 Third case: When the width is equal or less than 767px:
第三种情况：当宽度等于或小于767px时： Three identical col-12 type columns stacked one over the other.
三根相同的col-12型色谱柱彼此叠放。
I'm having more trouble than I should getting the breaks to work, but I don't know for the life of me where I'm going wrong. 我遇到的麻烦超过了我应该休息的时间，但是我不知道我的生活哪里出了问题。
Here's my code. 这是我的代码。
<!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>
1 个解决方案
解决方案1
3 已采纳 2017-02-04 13:15:39
Use a validator . 使用验证器 。 Your CSS has machine detectable errors in it. 您的CSS中有机器可检测的错误。
@media (min-width: 768) and (max-width: 991px) {
You have repeatedly (although not universally) specified a non-zero length without a unit. 您反复（尽管不是普遍地）指定了一个不带单位的非零长度。 This renders the CSS invalid so it will be ignored. 这使CSS无效，因此将被忽略。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.