1.字體也不能使用絕對大小（px），而只能使用相對大小（em）。

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

上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。

h1 {
　　　　font-size: 1.5em; 
　　}

然後，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。

2.選擇加載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文件。

3、CSS的@media規則

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

@media screen and (max-device-width: 400px) {
　　　　.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}
　　　　#sidebar {
　　　　　　display:none;
　　　　}
　　}

pc端適配