1.首先，在網頁代碼的頭部，加入一行viewport元標簽。

viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。

所有主流瀏覽器都支持這個設置，包括IE9，對于那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

2、不使用絕對寬度由于網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。具體說，CSS代碼不能指定像素寬度：width:xxxpx;

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

3、相對大小的字體

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

body{

font:normal100%Helvetica,Arial,sans-serif;

}

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

h3{

font-size:1.5em;

}

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

small{

font-size:0.875em;

}

small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。