超流行的響應式設計極簡教程

標籤：des   style   blog   http   color   io   使用   ar   strong   

網上關於響應式設計的教程好複雜，我寫一個簡版的。

簡單說呢就針對不同的螢幕解析度應用不同的CSS樣式。比如在電腦、Pad裝置上，螢幕比較寬，就可以一行放2個Div。到了手機上，或者Pad豎著拿的的時候，一行就只放1個Div。


這裡有2個關鍵點：

• 一是如何在不修改Dom結構的前提下調整布局。
• 二是如何判斷螢幕解析度並應用對應的CSS。

以上兩點都應該不依賴與JS。

實現第一點依靠的是流式布局。就是所有參與布局的DIV都用float:left，寬度都用百分比表示。比如，黃色部分的寬度是60%，橘色寬度是40%。

如果將黃色和橘色的寬度都width=100%,那麼從1行變成2行了，如。從而實現不修改Dom實現布局變化。

那麼如何不使用JS而實現動態調整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

1. <meta name="viewport" content="width=device-width; initial-scale=1.0">

總結一下：響應式布局有三個關鍵點：

• 流式布局 Liquid Layout
• Media Query
• viewport

具體細節就請大家自己研究相關的文法了。

Media Query的文法比較複雜，這裡個大家推薦一個工具，可以方便的設計布局，並可以針對各種裝置自動產生Media Query的語句：

http://www.responsivewebcss.com/

 

轉載自：AlloyTeam

超流行的響應式設計極簡教程