響應式網頁設計實現發方法

一、首先，在網頁代碼的頭部，加入一行viewport元標籤。

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

二、儘可能少使用絕對寬度

三、相對大小的字體

四、流動佈局（fluid grid）
"流動佈局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。更多內容請查看流動佈局的文章。

float的好處是，若是寬度過小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。

五、選擇加載CSS

"自適應網頁設計"的核心，就是CSS3引入的Media Query模塊。

它的意思就是，自動探測屏幕寬度，而後加載相應的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文件。

除了用html標籤加載CSS文件，還能夠在現有CSS文件中加載。

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

六、CSS的@media規則

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

　　　　.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}

　　　　#sidebar {
　　　　　　display:none;
　　　　}

　　}

七、圖片的自適應（fluid image）

除了佈局和文本，"自適應網頁設計"還必須實現圖片的自動縮放。

這隻要一行CSS代碼：

　　img { max-width: 100%;}

這行代碼對於大多數嵌入網頁的視頻也有效，因此能夠寫成：

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

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

　　img { width: 100%; }

此外，windows平臺縮放圖片時，可能出現圖像失真現象。這時，能夠嘗試使用IE的專有命令：

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

或者，Ethan Marcotte的imgSizer.js。

　　addLoadEvent(function() {

　　　　var imgs = document.getElementById("content").getElementsByTagName("img");

　　　　imgSizer.collate(imgs);

　　});

不過，有條件的話，最好仍是根據不一樣大小的屏幕，加載不一樣分辨率的圖片。有不少方法能夠作到這一條，服務器端和客戶端均可以實現。