Question

我目前有一个包含3个部分的页脚，如下所示：

.foot1, .foot2, .foot3 { width: 33%; float: left; }
.foot2 { margin: 0 0.5%; }

我希望他们改变768px和480px的布局。在768px，我有以下内容（将第一个堆叠在顶部，＃2＆amp; 3分割下面的空间）：

.foot1 { width: 98%; float: none; margin: 0 1%; }
.foot2, .foot3 { width: 48%; margin: 0 1%; }

在480px（拥有全部3个堆叠并占用宽度）我有：

.foot2, .foot3 { width: 98%; float: none; }

我的问题是，在480px及以下，宽度没有被遵循，仍然保持在48％。如果我在Chrome中使用'inspect'，我可以看到'float：none;'正在遵循，但不是媒体查询的宽度。

有没有人知道为什么它会选择识别浮动声明而不是宽度：98％？

谢谢！

Answer 1

我试图重现您遇到的问题，但无法重现。

我相信下面的测试代码可以按照您的意愿运行。你的代码与下面的html / css有什么不同？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .foot1 { background: tan }
    .foot2 { background: green }
    .foot3 { background: blue }
    .foot1, .foot2, .foot3 { width: 33%; float: left; }
    .foot2 { margin: 0 0.5%; }
    @media screen and (max-width: 768px) {
      .foot1 { width: 98%; float: none; margin: 0 1%; }
      .foot2, .foot3 { width: 48%; margin: 0 1%; }
    }
    @media screen and (max-width: 400px) {
      .foot2, .foot3 { width: 98%; float: none; }
    }
  </style>
</head>
<body>
<div class="foot1">foot1</div><div class="foot2">foot2</div><div class="foot3">foot3</div>
</body>
</html>

未遵循媒体查询宽度

1 个答案: