窗口調整大小時Div重新調整大小

Question

你好朋友我來這里有一個困惑我找到一個網頁，其中coniatins兩個容器一個是左側，第二個是右側當我減少瀏覽器的寬度后一個限制右側div移動beneth左側div非常奇怪對我來說，我第一次看到這一點，我試圖弄清楚他們是如何做到這一點，但faild得到相同的結果。 只需瀏覽http://jquerymobile.com/demos/1.2.0-pre/鏈接

我希望你們明白我要解釋的是什么。 只需打開鏈接並在限制后減少瀏覽器的寬度，您就可以看到我在說什么

請分享您的觀點

提前致謝 ......

Answer 1

他們使用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;
    }
}


​

Answer 2

它叫做響應式網頁設計。 您可以為所有不同的屏幕尺寸創建網站（桌面，標簽和移動設備）。

可以通過應用媒體查詢來控制布局，其中基於屏幕寬度指定css。

例如：@media screen和（min-width：900px）{。class {background：＃666; }}

這里的媒體類型是屏幕，指定的css將適用，直到寬度為900px或更高。 一旦屏幕寬度小於900px，就不會應用媒體查詢中指定的css。