手機(jī)的屏幕對照小，寬度通常在600像素以下；PC的屏幕寬度，普通都在1000像素以上，有的還達(dá)到了2000像素。同樣的內(nèi)容，要在大小迥異的屏幕上，都體現(xiàn)出滿意的效益，并不是一件容易的事。許多網(wǎng)站的做法是對不同終端設(shè)計(jì)多個網(wǎng)頁，但這樣會有許多維護(hù)的問題，在這里我們能夠設(shè)計(jì)一個簡易的盒子，這個盒子能夠辨別不同的終端而顯示不同的效益。
在網(wǎng)頁代碼的頭部，加入一行viewport元標(biāo)簽。
<meta name="viewport" content="width=device-width,initial-scale=1" /> viewport是網(wǎng)頁默認(rèn)的寬度和高度，上面這行代碼的意思是，網(wǎng)頁寬度默認(rèn)等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁初始大小占屏幕面積的100%。
因?yàn)榫W(wǎng)頁會按照屏幕寬度調(diào)整部署，所以不能操作絕對寬度的部署，也不能操作具備絕對寬度的元素。對圖像來講也是這樣。 詳盡說，CSS代碼不能指定像素寬度：width:xxx px; 只能指定百分比寬度：width: xx%; 或者width:auto;
字體也不能操作絕對大小（px），而只能操作相對大?。╡m）。 例如： body {font: normal 100% Helvetica, Arial,sans-serif;}上面的代碼指定，字體大小是頁面默認(rèn)大小的100%，即16像素。
流動部署（fluid grid） "流動部署"的含義是，各個區(qū)塊的位置都是浮動的，不是固定不變的。 .main {float: right;width: 70%; } .leftBar {float: left;width: 25%;} float的益處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），防止了水平滾動條的出現(xiàn)。
"自適應(yīng)網(wǎng)站設(shè)計(jì)"的中心，就是CSS3引入的MediaQuery模塊。 它的意思就是，自動探測屏幕寬度，然后加載相應(yīng)的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文件。
