網上關于響應式設計的教程好復雜,我寫一個簡版的。
簡單說呢就針對不同的屏幕分辨率應用不同的CSS樣式。比如在電腦、Pad設備上,屏幕比較寬,就可以一行放2個Div。到了手機上,或者Pad豎著拿的的時候,一行就只放1個Div。
這里有2個關鍵點:
- 一是如何在不修改Dom結構的前提下調整布局。
- 二是如何判斷屏幕分辨率并應用對應的CSS。
以上兩點都應該不依賴與JS。
實現(xiàn)第一點依靠的是流式布局。就是所有參與布局的DIV都用float:left,寬度都用百分比表示。比如下圖,黃色部分的寬度是60%,橘色寬度是40%。
如果將黃色和橘色的寬度都width=100%,那么從1行變成2行了,如下圖。從而實現(xiàn)不修改Dom實現(xiàn)布局變化。
那么如何不使用JS而實現(xiàn)動態(tài)調整CSS樣式就是第二個關鍵點。
HTML5中提供了一種新的CSS語法——@media,學名是Media Query,可以為不同的分辨率設定不同的樣式。
CSS
- /* Phone Portrait (320px) */
- @media only screen and (max-width: 320px) {
- #head { width: 100%; }
- #main { width: 100%; }
- #foot { width: 100%; }
- #left { width: 100%; }
- #right { width: 100%; }
- }
復制代碼
上面這段代碼的含義就是當屏幕寬度小于等于320像素時應用大括號中的樣式。
下圖是在CSS生效時在瀏覽器中的效果:
@media還有一些更復雜的用法,比如:
CSS
- /* Phone Landscape (480px) */
- @media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
復制代碼
這段語句就是針對iPhone橫屏的。即,瀏覽器寬度在321-480像素之間,且方向是“橫向”時生效。
不過自從Retina這中妖艷的屏幕推出,分辨率已經不能代表世界的真相了。小小的Note3的分辨率比一些17“顯示的分辨率還高。
所以還有必要判斷一下設備的像素密度-device-pixel-ratio。
CSS
- @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
復制代碼
比如上面的語句就是判斷終端的像素比是2的話,所渲染的樣式。可以適用于iPhone4,iPhone5等設備。
除了上述兩點,還需要在頁面上增加一個viewport的meta標簽,否則在手機上可能會有頁面自動縮放的情況。例如:
HTML
- <meta name="viewport" content="width=device-width; initial-scale=1.0">
復制代碼
總結一下:響應式布局有三個關鍵點:
- 流式布局 Liquid Layout
- Media Query
- viewport
具體細節(jié)就請大家自己研究相關的語法了。
Media Query的語法比較復雜,這里個大家推薦一個工具,可以方便的設計布局,并可以針對各種設備自動生成Media Query的語句:
http://www.responsivewebcss.com/
|