0

効果を確認するために、メディア クエリを試していました。そこでmin-width(480px)、クエリを使用して、ウィンドウが最大化されたときにa の幅をdivからに変更しようとしましたが、の幅はそのままです。100%520px div100%

コード：

#box {
    margin: auto;
    background: white;
    width: 100%;
}
// Media Queries
@media only screen and (min-width: 480px) {
    #box {
        width: 200px;
        max-width: 200px;
        background: black;
    }
}

だから私の質問は、ウィンドウが最大化されたときと#box同じ幅がとどまるのはなぜですか? 私は何を間違っていますか？100%

4

3 に答える 3

2

jsFiddledは、min-width:480px のコードです。利用可能なスペースのサイズが 480px (ブラック ボックス) より大きい場合に適用されます。

max-width を試してください。このコンテキストは、使用可能な画面スペースが 480 ピクセル未満の場合に適用されます。jsFiddled here、使用可能なスペース幅が 480px 未満の場合、ブラック ボックスが適用されます

@media only screen and (max-width: 480px) {
    #box {
        width: 200px;
        max-width: 200px;
        background: black;
    }
}

したがって、使用可能なスペースが 480px を超える場合を除いて、#box はデフォルトで幅 100% です。あなたのコードは正常に動作しています。

多分それはコメントです: // メディアクエリの魔女がエラーを引き起こしましたか?

于 2013-05-22T16:00:23.353 に答える
0

メディアクエリが間違っていると思います。あなたが今持っているように、それは480px以上のコンテンツを変更しています. 480px以下にしたいところ。

したがって、次のようになります。

@media only screen and (max-width: 480px) {
  //code
}

したがって、ではありません。(max-width: xxx)(min-width: xxx)

フィドルの例

于 2013-05-22T16:08:37.617 に答える
0

//CSS でサポートされていない構文を誤って使用してコードにコメントしたため、そのコメント行の下のコードが機能しません。/**/構文を変更した後、動作するようになりました。

于 2013-05-22T16:28:00.000 に答える