CSS媒體查詢最小寬度工作不正常

我有一個像HTML：CSS媒體查詢最小寬度工作不正常

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Code: NewYork</title> 
    <link rel="stylesheet" href="test.css" /> 
</head> 
<body data-ng-app="us"> 
    <input type="text" /> 
</body> 
</html>

和我的CSS是：

input { 
    background-color: red; 
} 
/* ---- Desktop */ 
@media only screen and (min-width: 1000px) and (max-width: 1200px) { 
    input { 
     background-color: green; 
    } 
}

現在當窗口是909px寬的CSS適用。顯然不是一個滾動條問題。我遇到這個簡單問題的堅果。我用Chrome和IE10測試它們都是一樣的。

任何人都可以請幫助我在這裏做錯了嗎？

來源

2013-05-21 Tuan

我用這個HTML：

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Code: NewYork</title> 
</head> 
<body data-ng-app="us"> 
    <input type="text" /> 
</body> 
</html>

有了一個簡單的媒體查詢聲明像這樣的：

@media (min-width: 1000px) and (max-width: 1200px) { 

input { 
     background-color: green; 
    } 

}

它在這裏工作很大：http://jsbin.com/ubehoy/1調試與Firefox Responsive Design View

並拖動大小調整，它會在達到寬度限制時正確更改輸入背景顏色。

嘗試使用Chrome 26.0.1410.64 m/IE 10，它的工作也很棒。

來源

2013-05-21 23:32:34

你是對的，由於任何奇怪的原因，我的鍍鉻物測量900像素，雖然窗口是1000像素。儘管html和css完全一樣。我打開一個窗口，將兩個文檔放在兩個選項卡中，以確保寬度相同。在我的本地文件鉻的措施900px：（ – Tuan

+33

該死的我是愚蠢的。該標籤是放大級別上花了幾個小時在這 - 我應該工作這麼晚...謝謝！ – Tuan

：D ...這是一個困難的事情看看吧，真的！ –

@media (min-width: 1000px) and (max-width: 1200px) { 

input { 
     background-color: green; 
    } 

}

這可行，但請確保您檢查縮放。（我從評論中得到了這個答案，因爲它似乎是這裏的大捕獲......我也爲此付出了努力）

來源

2016-10-21 14:14:51 Victor

我不時有這種事情發生在我身上。確保你的標籤沒有放大（⌘0）

來源

2017-05-30 17:36:25

CSS媒體查詢最小寬度工作不正常

回答

相關問題