2014-10-23 藍藍設(shè)計的小編
網(wǎng)上關(guān)于響應(yīng)式設(shè)計的教程好復(fù)雜,我寫一個簡版的。 簡單說呢就針對不同的屏幕分辨率應(yīng)用不同的CSS樣式。比如在電腦、Pad設(shè)備上,屏幕比較寬,就可以一行放2個Div。到了手機上,或者Pad豎著拿的的時候,一行就只放1個Div。 這里有2個關(guān)鍵點:
以上兩點都應(yīng)該不依賴與JS。 實現(xiàn)第一點依靠的是流式布局。就是所有參與布局的DIV都用float:left,寬度都用百分比表示。比如下圖,黃色部分的寬度是60%,橘色寬度是40%。 如果將黃色和橘色的寬度都width=100%,那么從1行變成2行了,如下圖。從而實現(xiàn)不修改Dom實現(xiàn)布局變化。 那么如何不使用JS而實現(xiàn)動態(tài)調(diào)整CSS樣式就是第二個關(guān)鍵點。 HTML5中提供了一種新的CSS語法——@media,學名是Media Query,可以為不同的分辨率設(shè)定不同的樣式。 CSS
下圖是在CSS生效時在瀏覽器中的效果: @media還有一些更復(fù)雜的用法,比如: CSS
不過自從Retina這中妖艷的屏幕推出,分辨率已經(jīng)不能代表世界的真相了。小小的Note3的分辨率比一些17“顯示的分辨率還高。 所以還有必要判斷一下設(shè)備的像素密度-device-pixel-ratio。 CSS
除了上述兩點,還需要在頁面上增加一個viewport的meta標簽,否則在手機上可能會有頁面自動縮放的情況。例如: HTML
總結(jié)一下:響應(yīng)式布局有三個關(guān)鍵點:
具體細節(jié)就請大家自己研究相關(guān)的語法了。 Media Query的語法比較復(fù)雜,這里個大家推薦一個工具,可以方便的設(shè)計布局,并可以針對各種設(shè)備自動生成Media Query的語句: http://www.responsivewebcss.com/ |
藍藍設(shè)計的小編 http://tweetduck.com