我的页脚没有响应答案

【问题标题】：My footer is not responsive我的页脚没有响应
【发布时间】：2015-06-05 11:14:12
【问题描述】：

我有一个两列页脚，当我缩小浏览器（列只是相互堆叠）并在媒体查询中点击第三个断点时，它不会调整大小。知道我应该改变什么吗？完整的小提琴在这里：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 牛肉猪肉多纳牛腩 boudin leberkas 意大利腊肠舌头。猪肚干肉汤舌头 alcatra turducken rump doner 鹿肉火腿飞节猪 leberkaslandjaeger 沙朗 kielbasa。牛培根丁骨球尖kielbasa。

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;
  }
}

【问题讨论】：

您有大量无效的 HTML。例如。 <div class="small_right"，<p id="footer_copyright">&copy; Silvia Bogdan, 2015</div>。你应该正确缩进你的代码，这样你就不会错过这样的事情。
试试搔痒它（谢谢，谢谢......整个星期都在这里，试试小牛肉！）;）
是的，没错，我想我已经在一次又一次地更改内容时删除了它们。我更正了它们，但这并没有影响结果，重新调整浏览器大小时，div 仍然堆叠得很奇怪。

标签： html css responsive-design

【解决方案1】：

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

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

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

【讨论】：

我有点困惑，我在这个媒体查询中没有这样做：@media screen and (min-width : 481px) and (max-width : 768px) ?
如果您对这些规则有所了解，那么它们不在您的问题范围内。但即便如此，如果你有一个最小宽度，任何更小的东西仍然会使用默认规则。指定最小屏幕时完全关闭最小宽度。
哦，我看到你的小提琴里有这个。但是在该媒体查询中没有与页脚相关的规则。
我无法在此处发布整个代码，因此我在整个代码中放了一个指向小提琴的链接，对此感到抱歉。所以我想毕竟问题出在断点上。
好吧，我现在明白我的错了，我没有问正确的问题。我没有该宽度的规则，因为我希望应用默认规则，所以我希望页脚的两列占宽度的 100%。我的问题是当我达到 769 像素时，我希望我的列一个接一个地出现（每个列占宽度的 50%），但它们彼此重叠出现，就像国际象棋图案一样。这有意义吗？

【解决方案2】：

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

你还没有结束一个起始标签

<div class="small_right">

【讨论】：

是的，我做到了，我想念他们。

【解决方案3】：

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

我建议你使用 box-sizing:border-box 以避免琐碎的宽度计算。

将此添加到您的 CSS 文件顶部

html {
  box-sizing: border-box;
}

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

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

如果你使用 box sizing border-box 那么所有的内边距和边框都将被设置为你的 div 的实际宽度的一部分，在你的 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;
        }     

}

【讨论】：