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