0

私は RWD について多くのことを読んでいて、本当にやってみたいと思っていたので、友人のために構築する Web サイトがあり、良いテスターに​​なると思いました。YouTube で、ゼロからサイトを構築し、レスポンシブにしたい場合は、最小のビューポートから構築し、時間をかけてスケールアップするというビデオを見ました。これが私がやっていることです。

ただし、私の最初の CSS メディア クエリは次のとおりです。

@media only screen and (min-width: 480px) and (max-width: 767px) { 
body {
background: #000;
}

デバイス/ブラウザが 480px の最小幅に達し、背景を黒くしたい (純粋にテスト目的で) と、応答しないようです。

ここに私のウェブサイトのコードがあります: http://jsfiddle.net/F6Xbp/

もともと、私は次のようなメディアの声明を持っていました。

@media only screen and (max-width: 479px) { 
}

これは私がウェブサイトの構築を開始した場所でしたが、各ビューポートが認識されるとスタイルがオーバーライドされるため、max-width: 479px をベースの出発点として使用できると考えたため、これを削除しました。

いくつかの返事を聞くのを楽しみにしていますが、ここでとても単純なことを見落としていることは間違いありません。

キース:-)

4

2 に答える 2

1

私はそれを機能させました：http://jsfiddle.net/F6Xbp/1/

テクニック 1

@media screen and (max-width: 480px) {
    body { background-color:black; }
}

テクニック 2

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {    
    body { background-color:black; }
}

max-widthとの違いについては、こちらmax-device-widthを参照してください。

于 2013-08-17T13:36:50.587 に答える