2

こんにちは、私は混乱してここに来ています。右側の div が左側の div の下に移動された後、ブラウザの幅を再利用すると、2 つのコンテナ 1 つが左側にあり、2 つ目が右側にある Web ページが見つかりました。非常に奇妙です。私にとっては、これを初めて見たのですが、彼らがどのようにそれを行ったのかを理解しようとしましたが、同じ結果が得られませんでした。リンクhttp://jquerymobile.com/demos/1.2.0-pre/にアクセスするだけです

私が説明しようとしていることを理解していただければ幸いです。リンクを開いてブラウザの幅を制限した後、私が話していることを見ることができます

あなたの意見を共有してください

前もって感謝します ......

4

2 に答える 2

5

彼らはCSS メディア クエリを使用しました。

http://jsfiddle.net/xPMqm/1/

HTML:

<div id="chameleon"></div>​

CSS:

#chameleon{
    width:100px;
    height:100px;
    background-color:yellow;
}

@media all and (min-width:600px) {
    #chameleon{
        background-color: blue;
        height: 200px;
    }
}

@media all and (min-width:800px) {
    #chameleon{
        background-color: green;
        height:300px;
    }
}

@media all and (min-width:1000px) {
    #chameleon{
        background-color: orange;
        height: 400px;
    }
}


​
于 2012-08-28T06:38:11.913 に答える
4

そのレスポンシブ Web デザインと呼ばれます。様々な画面サイズ（デスクトップ、タブ、モバイルデバイス）に対応したウェブサイトを作成できます。

画面幅に合わせてcssを指定したメディアクエリを適用することで、レイアウトを制御することができます。

例: @media screen and (min-width: 900px) { .class { background: #666; } }

ここでは、メディア タイプがスクリーンで、幅が 900px 以上になるまで、指定された css が適用されます。画面の幅が 900px 未満になるとすぐに、メディアクエリ内で指定された css は適用されません。

于 2012-08-28T06:43:28.720 に答える