我无法让我的媒体休息时间按预期工作。我希望得到与 Bootstrap 的网格系统类似的结果，如下所示:
第一种情况:当宽度等于或大于992px时:
Three identical col-4 type columns containing the different paragraphs
第二种情况:当宽度在768px到991px之间时:
Two identical col-6 columns, with the third one being a col-12 type column (obviously below the two).
第三种情况:当宽度等于或小于767px时:
Three identical col-12 type columns stacked one over the other.
我遇到的麻烦比我应该得到的休息时间还要多，但我终究不知道哪里出了问题。
这是我的代码。
<!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>最佳答案
使用a validator .您的 CSS 中存在机器可检测的错误。
@media (min-width: 768) and (max-width: 991px) {
您反复(尽管不是普遍)指定了一个没有单位的非零长度。这会使 CSS 无效，因此将被忽略。
关于html - 为什么我的媒体查询没有响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42040779/