響應式佈局 (Responsive Web Design)

1、概念

Responsive Web Design（響應式佈局）這個名詞是Ethan Marcotte在2010年提出，指 能夠自動識別屏幕寬度、並作出相應調整的網頁設計。這裏還有，推薦安裝一個 小工具 ，它能夠在一張網頁上，同時顯示不一樣分辨率屏幕的測試效果。

2、自動調整網頁寬度

首先，在網頁代碼的頭部，加入

<meta name="viewport" content="width=device-width, initial-scale=1" />

上面這行代碼的意思是：網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）爲1.0，即網頁初始大小佔屏幕面積的100%。全部主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE六、七、8），須要另外重寫。

<!--[if lt IE 9]>

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]-->

3、不使用絕對寬度

因爲網頁會根據屏幕寬度調整佈局，因此不能使用絕對寬度的佈局，也不能使用具備絕對寬度的元素。
具體說，CSS代碼不能指定像素寬度：

width:number px;

只能指定百分比寬度：

width: x%;

或者自動：

width: auto;

4、不使用絕對大小字體

只使用相對大小（em）字體，不能使用絕對大小（px）字體。下面這段代碼的意思是：字體大小是頁面默認大小的100%，即16像素；h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）；small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。

body {

font: normal 100% Helvetica, Arial, sans-serif;

}

h1 {

font-size: 1.5em;

}

5、選擇加載樣式

響應式佈局的核心就是自動探測屏幕寬度，加載相應的CSS樣式。

1.用html標籤加載CSS文件

<link rel="stylesheet" type="text/css" 
    media="screen and (max-device-width: 400px)" 
    href="tinyScreen.css" />

上面的代碼意思是：若是屏幕寬度小於400像素（max-device-width: 400px），就加載tinyScreen.css文件。

<link rel="stylesheet" type="text/css"
    media="screen and (min-width: 400px) and (max-device-width: 600px)"
    href="smallScreen.css" />

上面的代碼意思是：若是屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。

2.還能夠在現有CSS文件中加載其餘CSS文件

@import url("tinyScreen.css") screen and (max-device-width: 400px);

6、媒體查詢 (@media) 規則

同一個CSS文件中，也能夠根據不一樣的屏幕分辨率，選擇應用不一樣的CSS規則。

@media screen and (max-device-width: 400px) {

    .column {

    float: none;

    width:auto;

    }

    #sidebar {

    display:none;

    }

    }

上面的代碼意思是:若是屏幕寬度小於400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。

7、流式佈局

"流式佈局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。它的好處是，若是寬度過小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。

8、圖片縮放

除了佈局和文本，響應式佈局還必須實現圖片的自動縮放。這隻要一行CSS代碼，對於大多數嵌入網頁的視頻也有效。

img { max-width: 100%;}

img, object { max-width: 100%;}

老版本的IE不支持max-width，因此只好寫成：

img { width: 100%; }

windows平臺縮放圖片時，可能出現圖像失真現象。這是能夠嘗試針對IE瀏覽器內核寫：

img { -ms-interpolation-mode: bicubic; }

不過，最好的實現方式仍是根據不一樣大小的屏幕，加載不一樣分辨率的圖片。

服務器端和客戶端均可以實現。兩種方式的具體實現方法之後介紹。