Question

我无法按预期让媒体中断工作。我想对Bootstrap的网格系统有类似的结果如下：

第一种情况：当宽度等于或大于992px时：

包含不同段落的三个相同的col-4类型列
第二种情况：当宽度介于768px和991px之间时：

两个相同的col-6柱，第三个柱是col-12型柱（显然低于两列）。
第三种情况：当宽度等于或小于767px时：

三个相同的col-12型柱彼此堆叠。

我遇到的麻烦比应该休息的时间要多，但我不知道我的生活中哪里出错了。

这是我的代码。

＆＃13;

<!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>

＆＃13;

Answer 1

使用documentation。你的CSS里面有机器可检测到的错误。

uint8_t

您已经重复（尽管不是普遍）指定了没有单位的非零长度。这会使CSS无效，因此会被忽略。

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

1 个答案: