媒體查詢沒有響應正確的屏幕尺寸

我使用的是最新版本的Firefox，我的媒體查詢大多工作正常。奇怪的是，他們沒有以正確的方式響應我的屏幕大小。這裏是例子：媒體查詢沒有響應正確的屏幕尺寸

.div{ 
    float:left; 
    width:50%; 
    text-align:left; 
    color:#000000; 
    line-height:18px; 
    margin-right:15px; 
    display:inline; 
} 

@media all and (max-width:1366px){.div{ 
    float:left; 
    width:40%; 
    text-align:left; 
    color:#000000; 
    line-height:18px; 
    margin-right:15px; 
    display:inline; 
} }

現在我的瀏覽器設置爲1600的寬度，但它依然採用媒體查詢（而不是上面的默認代碼）中的代碼。爲什麼當我設置（max-width：1366px）時會這樣做？我在我的CSS代碼中發現了很多其他情況。我之前已經解決了這個問題，但是要確保沒有簡單的解釋。

來源

2014-02-27 programmingnewb

'.div' ??你確定課程名稱嗎？ – Praveen

我改變了這個例子的類名。這在我的代碼中是不同的。這是一個很長的名字，所以我認爲這會更簡單。 – programmingnewb

你可以提供任何JSFiddle嗎？ –

有什麼不對您的疑問：Fiddle

次要的事情，你只需要指定要更改的屬性，無需重複同樣的事情兩次。媒體查詢中的樣式與所有CSS一樣級聯。

要解決媒體查詢沒有顯示：

你如何設置你的顯示寬度？
您的瀏覽器縮放設置爲100％嗎？
您是否嘗試將媒體查詢設置爲不同的寬度以確保它絕對會觸發？我發現一個組分層的媒體查詢有一個明顯的變化在每個有用

例如：

@media screen and (max-width:600px) { 
    .div { 
     background-color:red; 
    } 
} 
@media screen and (max-width:900px) { 
    .div { 
     background-color:green; 
    } 
} 
@media screen and (max-width:1200px) { 
    .div { 
     background-color:blue; 
    } 
}

來源

2014-02-27 08:50:30 Timmah

感謝您的回覆。我的縮放設置爲100％。我通過Windows中的屏幕分辨率設置來設置我的顯示寬度。我已經改變了div的寬度，並且它正在觸發，因爲頁面上的內容在刷新時會改變大小。因此，當我將屏幕分辨率設置爲1600像素時，指定max-width：1366px的div內的代碼正在觸發。 Windows屏幕分辨率與CSS所看到的不同？ – programmingnewb

看起來像您的評論指出我在正確的方向。在Firefox中，我一直將縮放重置爲默認值，我認爲這是100％。但是，當我在IE中測試時，我可以在其中指定100％，它可以工作。然後，當我從Firefox默認縮小兩倍時，我得到與IE相同的結果。所以Firefox必須有150％的默認值，這就是爲什麼它不起作用。 – programmingnewb

很高興聽到它現在正在工作。請注意，'max-width'中的'width'指的是*瀏覽器*的最左側和最右側之間的像素距離，而不是實際的窗口。設備顯然會使用整個屏幕尺寸，但這只是因爲手機始終以全屏模式運行瀏覽器 – Timmah

它的工作這樣在Firefox的最新版本。對於可見變化我改變浮動：左浮動：權@media所有和（最大寬度：1366px）

<!DOCTYPE html> 
<html> 
<head> 
<title>media test</title> 
<style> 
.div{ 
    float:left; 
    width:50%; 
    text-align:left; 
    color:#000000; 
    line-height:18px; 
    margin-right:15px; 
    display:inline; 
} 

@media all and (max-width:1366px){.div{ 
    float:right; //just for a visible change 
    width:40%; 
    text-align:left; 
    color:#000000; 
    line-height:18px; 
    margin-right:15px; 
    display:inline; 
} } 
</style> 
</head> 
<body> 
<div class="div"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue, neque a luctus euismod, nisl massa faucibus erat, nec malesuada ante felis eleifend risus. Nullam nec lectus quam. Vestibulum hendrerit erat non tristique interdum. Curabitur pulvinar, risus molestie imperdiet egestas, erat diam mattis lacus, non imperdiet nibh sem id metus. Donec sed est turpis. Proin ultricies pharetra massa eget suscipit. Quisque eget enim placerat, tempor turpis vestibulum, euismod augue. Suspendisse placerat adipiscing porttitor. Nunc tempor vehicula felis at eleifend. Pellentesque vel ornare sem. Sed vitae neque vehicula, malesuada odio sed, dictum elit. Donec enim diam, placerat et ante pulvinar, tempus mattis massa. Fusce tempor dignissim dignissim. Quisque consequat risus id metus porttitor semper. Nunc ut facilisis neque. Vestibulum at ante sem. 
</p> 
</div> 
</body> 
</html>

來源

2014-02-27 08:52:21 tim

謝謝，如果將屏幕分辨率設置爲1600寬度，它是使用默認代碼還是媒體查詢碼？對我而言，即使1600像素比最大像素寬，它仍然使用媒體查詢代碼。 – programmingnewb

媒體查詢沒有響應正確的屏幕尺寸

回答

相關問題