Question

我有一个两个collumn页脚，当我使浏览器变小时（列只是堆叠在一起）并且在媒体查询中遇到第三个断点时不会调整大小。知道我应该改变什么？完整的小提琴就在这里：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 fatback牛肉猪肉doner brisket boudin leberkas意大利腊肠舌头。猪肚子biltong舌头alcatra turducken臀部doner鹿肉火腿飞腓节猪leberkas landjaeger牛腩kielbasa。牛培根T骨球尖kielbasa。

©Silvia Bogdan，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
}

Answer 2

在提出问题之前，您需要检查代码。

您还没有结束开始标记

<div class="small_right">

Answer 3

我注意到有一些未封闭的HTML标签在修改CSS之前纠正所有标记问题。

我建议您使用 box-sizing：border-box ，以避免琐碎计算宽度。

在CSS文件上添加此文件

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

我在您的代码中看到：width:47%;

如果使用框大小调整边框，则所有填充和边框都将设置为CSS中实际宽度的一部分。因此，在将宽度设置为50％并向左浮动后，您的页脚不会断开，向右浮动到您的两个页脚容器。

只需更正移动设备的媒体查询，然后添加到每个页脚div：

// Add your ideal mobile breakpoint

@media screen and (max-width : 640px) {  

        .small_left {
            width:50%;     
            float:left;
        }
        .small_right {
            width:50%;     
            float:right;
        }     

}

我的页脚没有响应

3 个答案: