響應式布局簡說

簡單說呢就針對不同的螢幕分辨率應用不同的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

1

2

3

4

5

6

7

8

<code>/* Phone Portrait (320px) */</code>

<code>@media only</code><code>screen</code> <code>and (</code><code>max-width</code><code>:</code><code>320px</code><code>) {</code>

<code>    </code><code>#head {</code><code>width</code><code>:</code><code>100%</code><code>; }</code>

<code>    </code><code>#main {</code><code>width</code><code>:</code><code>100%</code><code>; }</code>

<code>    </code><code>#foot {</code><code>width</code><code>:</code><code>100%</code><code>; }</code>

<code>    </code><code>#</code><code>left</code> <code>{</code><code>width</code><code>:</code><code>100%</code><code>; }</code>

<code>    </code><code>#</code><code>right</code> <code>{</code><code>width</code><code>:</code><code>100%</code><code>; }</code>

<code>}</code>

上面這段代碼的含義就是當螢幕寬度小于等于320像素時應用大括号中的樣式。下圖是在CSS生效時在浏覽器中的效果：

@media還有一些更複雜的用法，比如：

<code>/* Phone Landscape (480px) */</code>

<code>@media only</code><code>screen</code> <code>and (</code><code>min-width</code><code>:</code><code>321px</code><code>) and (</code><code>max-width</code><code>:</code><code>480px</code><code>) and (orientation:</code><code>landscape</code><code>) {</code>

這段語句就是針對iPhone橫屏的。即，浏覽器寬度在321-480像素之間，且方向是“橫向”時生效。

不過自從Retina這中妖豔的螢幕推出，分辨率已經不能代表世界的真相了。小小的Note3的分辨率比一些17“顯示的分辨率還高。

是以還有必要判斷一下裝置的像素密度-device-pixel-ratio。

<code>@media only</code><code>screen</code> <code>and (-moz-min-device-pixel-ratio:</code><code>2</code><code>), only</code><code>screen</code> <code>and (-o-min-device-pixel-ratio:</code><code>2</code><code>/</code><code>1</code><code>), only</code><code>screen</code> <code>and (-webkit-min-device-pixel-ratio:</code><code>2</code><code>), only</code><code>screen</code> <code>and (min-device-pixel-ratio:</code><code>2</code><code>)</code>

比如上面的語句就是判斷終端的像素比是2的話，所渲染的樣式。可以适用于iPhone4，iPhone5等裝置。

除了上述兩點，還需要在頁面上增加一個viewport的meta标簽，否則在手機上可能會有頁面自動縮放的情況。例如：

Html

<code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"viewport"</code> <code>content</code><code>=</code><code>"width=device-width; initial-scale=1.0"</code><code>&gt;</code>

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

1、流式布局 Liquid Layout

2、Media Query

3、viewport

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