1、在meta標簽中添加viewport

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

2、 不使用絕對寬度（px），使用相對寬度（%）

3、 不使用絕對文字大小（px），使用相對文字大小（em,rem）

　　em相對於父元素字體尺寸比例，rem相對於根元素（html元素）字體尺寸的比例，比如各瀏覽器默認根元素字體大小為16px，0.75rem就相當於16*0.75=12px。也可以先設置html{font-size:62.5%}，設置根元素字體大小為10px，然後再計算各元素的字體大小，如要設置12px就是1.2rem，14px就是1.4rem，25px就是2.5rem，更容易計算。

4、 媒體查詢標簽

　　自適應網頁設計的核心，就是CSS3引入的media query模塊。它的意思就是，自動探測屏幕寬度，然後加載相應的css文件。

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

　　上面代碼的意思是，如果屏幕寬度小於400像素(max-width:400px)，就加載tinyScreen.css文件。

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

　　如果屏幕寬度在400像素到600像素之間，則加載smallscreen.css文件。

5、 圖片的自動適應

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

img{max-width:100%}
img{min-width:100%}

　　老版本的IE不支持max-width，所以只好寫成img{width:100%}

如何設計響應式布局