1.在網(wǎng)頁(yè)header中加入viewport標(biāo)簽
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，上面這行代碼的意思是测摔，網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0呛每，即網(wǎng)頁(yè)初始大小占屏幕面積的100%揍愁。
所有主流瀏覽器都支持這個(gè)設(shè)置，包括IE9密似。對(duì)于那些老式瀏覽器（主要是IE6、7葫盼、8），需要使用css3-mediaqueries.js村斟。
這段代碼支持Chrome贫导、Firefox抛猫、IE9以上的瀏覽器，但不支持IE8以及低于IE8的瀏覽器孩灯。
2.在CSS文件尾部增加針對(duì)不同屏幕分辨率的規(guī)則闺金。
例如使用如下的代碼，可以讓屏幕寬度低于480像素的設(shè)備（如iPhone等）峰档，網(wǎng)頁(yè)側(cè)欄隱藏中部?jī)?nèi)容欄寬度自動(dòng)調(diào)節(jié)败匹。以下代碼針對(duì)Z-Blog，WordPress相關(guān)標(biāo)簽名稱只需修改一下即可讥巡。
@media screen and（max-device-width:480px）{
#divMain{
display:none;
width:auto;
}
#divSidebar{
display:none;
}
}
3.布局寬度使用相對(duì)寬度.
網(wǎng)頁(yè)總體框架可以使用絕對(duì)寬度掀亩，但往下的內(nèi)容框架、側(cè)欄等最好使用相對(duì)寬度欢顷，這樣針對(duì)不同分辨率進(jìn)行修改就方便槽棍。當(dāng)然也可以不用相對(duì)寬度，那就需要在 @media screen and (max-device-width: 480px) 里面增加各個(gè)div的針對(duì)小屏幕的寬度抬驴，實(shí)際上更麻煩炼七。
4.頁(yè)面使用相對(duì)字體
在HTML頁(yè)面上不要使用絕對(duì)字體（px），而要使用相對(duì)字體（em）布持，對(duì)于大多數(shù)瀏覽器來(lái)說(shuō)豌拙，通常用 em = px/16 換算，例如16px就等于1em题暖。
5.流動(dòng)布局（fluid grid）
float的好處是按傅，如果寬度太小，放不下兩個(gè)元素芙委，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方逞敷，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)灌侣。
另外推捐，絕對(duì)定位（position: absolute）的使用，也要非常小心侧啼。
6.選擇加載CSS
"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"的核心牛柒，就是CSS3引入的Media Query模塊。
它的意思就是痊乾，自動(dòng)探測(cè)屏幕寬度皮壁，然后加載相應(yīng)的CSS文件。
<link rel="stylesheet" type="text/css"
media
