媒体查询宽度不被跟踪

我现在有3个部分页脚奠定列如下：媒体查询宽度不被跟踪

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

我希望他们能够在768px和480像素更改布局。在768px，我有以下（堆叠在顶部的第一，用＃2 & 3分割它下方的空间）：

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

在480像素（将所有3堆栈和占用的宽度）予有：

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

我的问题是，在480px和以下，宽度未被遵循，仍然停留在48％。如果我在Chrome中使用“检查”，我可以看到'float：none'正在被追踪，但不是媒体查询的宽度。

有没有人有任何想法，为什么它会选择识别浮动声明，但不是宽度：98％？

谢谢！

来源

2011-10-19 user1004108

当然，它不应该这样做，但我想到的第一个解释是，你不使用特异性的每个媒体查询相同的水平（当然，除非你确实有foot1，foot2和foot3而不是像“div＃container div.element div.foot1”）。顺便说一下，当您在“匹配的CSS规则”下方看到类似于“仅@media屏幕和（最大宽度：480px）”的内容时，您知道是否使用了正确的媒体查询。 –

您可以粘贴媒体查询css吗？我指的是@ media screen部分。 – stephenmurdoch

如果你有'float：none'，你的显示不会自动设置为'block'。什么是CSS显示设置？如果是内联，则不使用宽度声明。 – HerrSerker

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

我相信我的测试代码如下工作，如你所愿。你的代码与下面的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>

来源

2012-03-27 06:48:01

媒体查询宽度不被跟踪

回答

相关问题