移動化的浪潮席捲而來，自適應網站也應運而生。擺在程序員的面前只有一條路，那就是怎麼實現它。
根據小編的經驗，僅提供以下3種自適應網站方案，且最後會簡要分析下其優劣，以供讀者分析使用什麼形式的自適應網站。
第一種：跳轉適配——兩套界面設計，相互獨立。
顧名思義就是識別出當前訪問該網站的設備，然後跳轉到相應的網站。當設備爲手機時，網站跳轉到手機版網站，當設備爲筆記本或臺式機時，網站跳轉到桌面版網站。
那麼問題來了，怎麼識別當前訪問的設備呢？
①第三方設備識別API
早在2012年，百度開發者中心面向開發者開放了他的終端識別服務，通過開發的API，可以將設備的信息提供給你，並推薦相應的適配方案。第三方處理過大量的設備數據，所以對於識別設備還是有一定的準確度的。
②前端js識別
根據設備對網站的請求信息，可以利用javascript的自帶對象進行獲取。
【navigator.userAgent】可以簡單獲取訪問設備的信息，比如iphone,android設備等
【window.screen.width】獲取當前設備屏幕的寬度，比如iphone 6的屏幕寬度是375（注意，iphone 6的分辨率爲750×1334）
根據上面這些簡單的信息，不使用第三方的API其實也可以做到大部分設備的適配。
第二種：代碼適配——兩套界面設計，互爲統一。
代碼適配其實也分兩種，一種是前端代碼適配，另一種是服務器適配。
①前端代碼適配：即採用【Media Query】技術
方式一：<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
方式二：
@media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
}
方式一、二其實就是【Media Query】技術根據設備的寬度自動幫你加載相應的CSS文件或樣式。
方式三：與【Media Query】技術類似，自己用js代碼識別設備信息，用js代碼加載相應的css文件，從而實現設備適配。
②服務器適配
前端服務將設備信息等傳至服務器，後臺服務器獲取後發送相應的相應信息給前端，前端只負責信息傳遞工作。
第三種：自適應適配——統一化設計，大小通吃。
顧名思義，做到自適應適配的網站對訪問的設備採用統一的設計，這也是最原生且最考驗網頁界面設計工程師和前端開發工程師能力的時候。
舉鞋簡單的例子：①在強制不允許設備放大縮小後，網頁元素根據百分比%來進行佈局；②因設備的分辨率等問題，字體大小改用em或rem等；③圖片都是等比例縮放；
④採用大量float屬性元素等。
評價與總結
接下來我就簡單評價一下這幾種方案的優劣。
第一種方案：跳轉適配。
實現難度比較低，且不會影響原PC版的頁面，只需開發者再開發一套專門用於移動設備的網站就行。不過個人覺得會影響後期的業務維護，畢竟移動版和PC版頁面割裂太大，將來業務的開展可能都需要併線進行，治標不治本。此外，不得不再提醒一點就是關於搜索引擎優化的問題，這個請自行百度，百度有出過這方面的推薦方案。
第二種方案：代碼適配。
實現難度適中，因爲PC端和移動端不免會有業務上和代碼上的交差，筆者接觸的好多項目就是採用這種方案，總的來說，分析和制定業務標準，對項目的銜接和後續拓展都會有幫助。在SEO搜索引擎優化這塊，還是需要注意一點的，怎麼注意請自行百度，百度官方有介紹。
第三種方案：自適應適配。
實現難度適中，其實與第二種方案類似，只是因爲有了統一的設計語言，代碼上可以複用以前項目的，而不是交差使用，一定程度上減輕了開發負擔，當然“新”的項目開展，不可避免會造成一定的工作負擔，如果原有項目已經很成熟，推薦先使用第二種。
轉自：http://blog.csdn.net/zhejiangzwj/article/details/52916745