媒體查詢寬度不被跟蹤

我現在有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

媒體查詢寬度不被跟蹤

回答

相關問題