html - 我的页脚没有响应

Question

我有一个两列的页脚，当我缩小浏览器时(列只是堆叠在一起)并在媒体查询中命中第三个断点时，它不会调整大小。知道我应该改变什么吗？完整的 fiddle 在这里:https://jsfiddle.net/Cilvako/9wkquboa/

<footer>

  <div class="small_left">
    <p>Bacon ipsum dolor amet shoulder spare ribs venison cow salami, turducken ham hock tail bacon tri-tip. Ground round jowl filet mignon cupim. Drumstick ribeye porchetta cow andouille. Jerky sirloin kevin ribeye salami doner ground round. Beef ribs pork
      porchetta meatloaf doner swine jowl tail kielbasa tenderloin frankfurter rump meatball. Beef meatball jerky andouille, corned beef doner chicken tri-tip pastrami porchetta spare ribs ham meatloaf. Bresaola capicola frankfurter filet mignon turducken</p>
  </div>
  <div class="small_right">

Turducken 牛里脊肉、landjaeger 肥背牛肉 pig 肉烤肉胸肉 boudin leberkas 萨拉米香肠舌头。五花肉干肉条舌头阿尔卡特拉图尔杜肯臀部烤肉鹿肉火腿飞节 pig leberkas landjaeger 牛loin kielbasa。牛培根丁骨球尖波兰熏肠。

© 西尔维娅·博格丹，2015

footer {
  width: 100%;
  font-family: BrandonGrotesque-Regular, "futura-pt-1", "futura-pt-2", Verdana, serif;
  font-size: 16px;
  line-height: 25px;
  margin-bottom: 0px;
  clear: both;
}
/*left div footer*/

.small_left {
  border: 1px solid black;
  letter-spacing: 1px;
  padding: 20px;
  background-color: black;
  color: white;
  text-align: justify;
  font-size: 13px;
}
/*right div footer*/

.small_right {
  border: 1px solid black;
  letter-spacing: 1px;
  height: 175px;
  padding: 20px;
  background-color: black;
  color: white;
  font-size: 13px;
  text-align: justify;
}

还有我遇到麻烦的媒体查询:

@media screen and (min-width: 769px) and (max-width: 1200px) {
  footer {
    width: 100%;
    font-family: BrandonGrotesque-Regular, "futura-pt-1", "futura-pt-2", Verdana, serif;
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 0px;
    clear: both;
    /*border: 1px blue solid;*/
  }
  /*left div footer*/
  .small_left {
    letter-spacing: 1px;
    display: inline-block;
    width: 44%;
    height: 252px;
    background-color: black;
    color: white;
    text-align: justify;
    font-size: 12px;
    float: left;
  }
  /*right div footer*/
  .small_right {
    letter-spacing: 1px;
    display: inline-block;
    width: 44%;
    height: 252px;
    height: 175px;
    background-color: black;
    color: white;
    font-size: 12px;
    text-align: justify;
    float: right;
  }
}

Answer 1

您没有为较小的屏幕指定任何 CSS。所以它会回到你的默认 CSS 规则。您的默认规则没有为这些 div 指定宽度，因此它使用默认值 100%。

如果您想要改变这一点，您需要为小屏幕添加另一个媒体部分。

@media screen and (max-width : 768px) {
   // put your rules here
}