說明：rem是基於html元素的字型大小來決定，而em則根據使用它的元素的大小決定。

一、頁面自適應

1、允許網頁寬度自動調整

程式碼：

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

說明：網頁寬度預設等於螢幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小佔螢幕面積的100%。

注 ：對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。 程式碼：

<!--
[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]
 
--> 

2、不使用絕對寬度

說明：

　　1、CSS程式碼不能指定畫素寬度：width:xxx px;

　　 2、只能指定百分比寬度：width: xx%;或者width:auto;

3、相對大小的字型：字型也不能使用絕對大小（px），而只能使用相對大小（em）。

4、流動佈局（fluid grid）

說明：“流動佈局”的含義是，各個區塊的位置都是浮動的，不是固定不變的。

5、選擇載入CSS

說明:“自適應網頁設計”的核心，就是CSS3引入的Media Query模組。 它的意思就是，自動探測螢幕寬度，然後載入相應的CSS檔案。 例：

<!--如果螢幕寬度小於400畫素（max-device-width: 400px），就載入tinyScreen.css檔案。-->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
<!--如果螢幕寬度在400畫素到600畫素之間，則載入smallScreen.css檔案。-->
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)"
 
 href="smallScreen.css" /> 

6、CSS的@media規則

說明：同一個CSS檔案中，也可以根據不同的螢幕解析度，選擇應用不同的CSS規則。

例 ：

/*
　　如果螢幕寬度小於400畫素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），
　　sidebar塊不顯示（display:none）。
*/
@media screen and (max-device-width: 400px) {
    .column {
        float: none; 
        width:auto;
    }
    #sidebar {
        display:none;
    }
} 

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

說明：除了佈局和文字，”自適應網頁設計”還必須實現圖片的自動縮放。

這隻要一行CSS程式碼：img { max-width: 100%;}

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

這隻要一行CSS程式碼：img { max-width: 100%;}

8、使用

圖片【img】

img{
    width: 100%;
    max-width: 50rem/em;
}

//當裝置的方向變化（裝置橫向持或縱向持）此事件被觸發。繫結此事件時，

//注意現在當瀏覽器不支援orientationChange事件的時候我們綁定了resize 事件。

//總來的來就是監聽當然視窗的變化，一旦有變化就需要重新設定根字型的值

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根據你設定的html的font-size屬性值做適當的變化
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

二、響應式佈局：

1、基本範圍

2、CSS 語法

(1)、

@media mediatype and|not|only (media feature) {
    id、class、屬性...{}
} 

(2)、

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"> 

3、媒體型別

4、媒體功能