調整窗口大小時調整大小

你好朋友我來這裏混淆我發現一個網頁coniatins兩個容器一個是左側，第二個是右側當我縮小瀏覽器的寬度後一個limiit右側div感動beneth左側div對我來說很奇怪，我第一次看到這一點，我試圖弄清楚他們是如何做到這一點，但卻得到了相同的結果。只需通過鏈接http://jquerymobile.com/demos/1.2.0-pre/調整窗口大小時調整大小

我希望你們明白我想說明的是什麼。只需打開鏈接並降低了瀏覽器的寬度後限制你可以看到什麼我談論

請提前分享您的意見

感謝......

來源

2012-08-28 Kamal

他們用CSS media queries。

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-28 06:38:11

爲獲得更多樂趣將垂直分隔線左右拖動:) –

其驚人的感謝您的幫助@Mythril還有一件事是這個支持所有瀏覽器.. – Kamal

請教[CanIUse]（http://caniuse.com/#feat = css-mediaqueries），你可以處理所有的功能滲透知識:)。 –

其所謂的自適應網頁設計。您可以創建所有不同屏幕尺寸的網站（桌面，標籤和移動設備）。

可以通過應用媒體查詢來控制佈局，其中根據屏幕寬度指定css。例如：

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

這裏的媒體類型是屏幕，指定的CSS將適用，直到寬度爲900px或更多。只要屏幕寬度小於900px，媒體查詢中指定的CSS就不會應用。

來源

2012-08-28 06:43:28 Mak

調整窗口大小時調整大小

回答

相關問題