web-dev-qa-db-ja.com

CSSメディアクエリの最小幅が正しく機能しない

私は次のようなHTMLを持っています：

<!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はどちらも同じです。

誰かが私がここで間違っていることを助けてくれますか？

cssmedia-queries
11
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レスポンシブデザインビュー でデバッグし、リサイザーをドラッグすると、幅の制限に達したときに入力の背景色が正しく変更されます。

Chrome 26.0.1410.64 m/IE 10で試してみましたが、うまく機能しています。

11
Leniel Maccaferri

私は時々これを私に起こさせました。タブが拡大されていないことを確認してください（⌘0）

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

 input {
        background-color: green;
    } 

}

これは機能しますが、ズームを確認してください。 （これはこのあたりの大きなキャッチであるように思われるので、コメントからこの答えを得ました..私もそれに落ちました）

1
Victor