簡單的完成Web響應(yīng)式設(shè)計(jì)
響應(yīng)式簡單說呢就針對不同的屏幕分辨率應(yīng)用不同的CSS樣式,。比如在電腦,、Pad設(shè)備上,,屏幕比較寬,,就可以一行放2個Div。 到了手機(jī)上,,或者Pad豎著拿的的時候,,一行就只放1個Div。 這里有2個關(guān)鍵點(diǎn): 一是如何在不修改Dom結(jié)構(gòu)的前提下調(diào)整布局,。 二是如何判斷屏幕分辨率并應(yīng)用對應(yīng)的CSS,。 以上兩點(diǎn)都應(yīng)該不依賴與JS。 實(shí)現(xiàn)第一點(diǎn)依靠的是流式布局,。就是所有參與布局的DIV都用float:left,,寬度都用百分比表示。比如下圖,,黃色部分的寬度是60%,,橘色寬度是40%。 如果將黃色和橘色的寬度都width=100%,那么從1行變成2行了,,如下圖,。從而實(shí)現(xiàn)不修改Dom實(shí)現(xiàn)布局變化。 那么如何不使用JS而實(shí)現(xiàn)動態(tài)調(diào)整CSS樣式就是第二個關(guān)鍵點(diǎn),。 HTML5中提供了一種新的CSS語法——@media,,學(xué)名是Media Query,可以為不同的分辨率設(shè)定不同的樣式,。
上面這段代碼的含義就是當(dāng)屏幕寬度小于等于320像素時應(yīng)用大括號中的樣式,。下圖是在CSS生效時在瀏覽器中的效果: @media還有一些更復(fù)雜的用法,比如:
比如上面的語句就是判斷終端的像素比是2的話,所渲染的樣式,??梢赃m用于iPhone4,iPhone5等設(shè)備。 除了上述兩點(diǎn),,還需要在頁面上增加一個viewport的meta標(biāo)簽,,否則在手機(jī)上可能會有頁面自動縮放的情況。例如:
總結(jié)一下:響應(yīng)式布局有三個關(guān)鍵點(diǎn):
具體細(xì)節(jié)就請大家自己研究相關(guān)的語法了,。 Media Query的語法比較復(fù)雜,,這里個大家推薦一個工具,可以方便的設(shè)計(jì)布局,,并可以針對各種設(shè)備自動生成Media Query的語句: http://www./ 本文轉(zhuǎn)載自騰訊AlloyTeam團(tuán)隊(duì) |
|