"自适應網頁設計"到底是怎麽做(zuò)到的(de)？其實并不難。
一.允許網頁寬度自動調整：
首先，在網頁代碼的(de)頭部，加入一行viewport元标簽。
< meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width"/>
viewport是網頁默認的(de)寬度和(hé)高(gāo)度，上面這(zhè)行代碼的(de)意思是，網頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）爲1.0，即網頁初始大(dà)小占屏幕面積的(de)100%。
對(duì)于老式IE6，7，8浏覽器需要js處理(lǐ)，由于主要平台是ios和(hé)安卓，所以可(kě)以暫時(shí)不考慮Opera不支持。
二.不使用(yòng)絕對(duì)寬度
由于網頁會根據屏幕寬度調整布局，所以不能使用(yòng)絕對(duì)寬度的(de)布局，也(yě)不能使用(yòng)具有絕對(duì)寬度的(de)元素。這(zhè)一條非常重要。
具體說，CSS代碼不能指定像素寬度：
width:xxx px;
隻能指定百分(fēn)比來(lái)定義列寬度：
width: xx%;
或者：
width:auto;
或者：
使用(yòng)最大(dà)寬度和(hé)最大(dà)高(gāo)度max-width,max-height;
三.相對(duì)大(dà)小的(de)字體
字體也(yě)不能使用(yòng)絕對(duì)大(dà)小（px），而隻能使用(yòng)相對(duì)大(dà)小（em）。body {font: normal 100% Helvetica, Arial, sans-serif;}上面的(de)代碼指定，字體大(dà)小是頁面默認大(dà)小的(de)100%，即16像素。h1 {font-size: 1.5em;}然後，h1的(de)大(dà)小是默認大(dà)小的(de)1.5倍，即24像素（24/16=1.5）。small {font-size: 0.875em;}small元素的(de)大(dà)小是默認大(dà)小的(de)0.875倍，即14像素（14/16=0.875）。
四.流動布局（fluid grid）"流動布局"的(de)含義是，各個(gè)區(qū)塊的(de)位置都是浮動的(de)，不是固定不變的(de)。.main {float: right;width: 70%;}.leftBar {float: left;width: 25%;}float的(de)好處是，如果寬度太小，放不下(xià)兩個(gè)元素，後面的(de)元素會自動滾動到前面元素的(de)下(xià)方，不會在水(shuǐ)平方向overflow（溢出），避免了(le)水(shuǐ)平滾動條的(de)出現。另外，絕對(duì)定位（position: absolute）的(de)使用(yòng)，也(yě)要非常小心。
五. "自适應網頁設計"的(de)核心，就是CSS3引入的(de)Media Query模塊。它的(de)意思就是，自動探測屏幕寬度，然後加載相應的(de)CSS文件。media="screen and (max-device-width: 400px)"href="tinyScreen.css" />上面的(de)代碼意思是，如果屏幕寬度小于400像素（max-device-width: 400px），就加載tinyScreen.css文件。media="screen and (min-width: 400px) and (max-device-width: 600px)"href="smallScreen.css" />如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件。除了(le)用(yòng)html标簽加載CSS文件，還(hái)可(kě)以在現有CSS文件中加載。@import url("tinyScreen.css") screen and (max-device-width: 400px);
六. CSS的(de)@media規則同一個(gè)CSS文件中，也(yě)可(kě)以根據不同的(de)屏幕分(fēn)辨率，選擇應用(yòng)不同的(de)CSS規則。@media screen and (max-device-width: 400px) {.column {float: none;width:auto;}#sidebar {display:none;}}上面的(de)代碼意思是，如果屏幕寬度小于400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。
爲列和(hé)浮動元素采用(yòng)線性設計:
@media screen and (max-width: 480px) {div,li {display: block;float:none;width:100%;}}
七.圖片的(de)自适應（fluid image）除了(le)布局和(hé)文本，"自适應網頁設計"還(hái)必須實現圖片的(de)自動縮放。這(zhè)隻要一行CSS代碼：img { max-width: 100%;}這(zhè)行代碼對(duì)于大(dà)多(duō)數嵌入網頁的(de)視頻(pín)也(yě)有效，所以可(kě)以寫成：img, object { max-width: 100%;}老版本的(de)IE不支持max-width，所以隻好寫成：img { width: 100%; }此外，windows平台縮放圖片時(shí)，可(kě)能出現圖像失真現象。這(zhè)時(shí)，可(kě)以嘗試使用(yòng)IE的(de)專有命令：img { -ms-interpolation-mode: bicubic; }或者，Ethan Marcotte的(de)imgSizer.js。addLoadEvent(function() {var imgs = document.getElementById_x_x_x("content").getElementsByTagName("img");imgSizer.collate(imgs);});不過，有條件的(de)話(huà)，最好還(hái)是根據不同大(dà)小的(de)屏幕，加載不同分(fēn)辨率的(de)圖片。有很多(duō)方法可(kě)以做(zuò)到這(zhè)一條，服務器端和(hé)客戶端都可(kě)以實現。
八. 首頁内容搜索欄，産品分(fēn)類，熱(rè)門産品，關鍵字。
九. 避免出現水(shuǐ)平滾動條
有時(shí),圖片或其他(tā)網頁元素會阻礙在一般情況下(xià)能夠正常流動的(de)容器元素.一下(xià)腳本能輕松地阻止上述行爲:
img,iframe {max-width:100%;box-sizing:border-box;}
