为什么我的媒体查询没有响应？
[英]Why aren't my media queries responding?
问题描述
我无法让媒体休息按预期方式工作。 我希望得到与Bootstrap的网格系统类似的结果，如下所示：
第一种情况：当宽度等于或大于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>
1 个解决方案
解决方案1
3 已采纳 2017-02-04 13:15:39
使用验证器 。 您的CSS中有机器可检测的错误。
@media (min-width: 768) and (max-width: 991px) {
您反复（尽管不是普遍地）指定了一个不带单位的非零长度。 这使CSS无效，因此将被忽略。
为什么我的简单 HTML/CSS 媒体查询和子框位置不起作用？
[英]Why aren't my simple HTML/CSS Media Queries AND child box locations working?
（SCSS）我的媒体查询在display上无法正常工作：flex;
[英](SCSS) My media queries aren't working correctly with display: flex;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.