文/皮皮魯網SEO負責人蔣飛
自適應也叫響應式，指可以自動識別屏幕寬度、並做出相應調整的網頁設計。目前被越來越多的站點所使用。同時百度也公開宣稱鼓勵大家用HTML5技術打造在PC站和移動站都能讓用戶有良好體驗的站點。那麼自適應站點在代碼上需要做出哪些調整可以對百度更加友好呢？
一、什麼樣的網站適合做自適應
自適應網頁設計(Responsive Web Design)是指可以自動識別終端設備屏幕的大小從而做出相應調整的網頁設計方法。這種網頁設計方法完美解決了如何在不同大小的網絡設備上呈現同樣的網頁效果。大家公認自適應至少有4個好處:提升用戶體驗；PC端和移動端SEO保持一致；避免重復內容和出錯內容；鏈接統一。
而自適應比較明顯的缺陷是，開發成本比較高，尤其是要構建包含額外編程的復雜的自適應網站，所需的時間會比較長。如果網站需求較簡單，有許多開源模板可供選擇。
對於已經比較成熟PC網站來說，如果要實現全站的自適應，有可能需要推掉原來所有的代碼進行重構，時間和技術成本都比較大，而且如果一個網站有多個portal（入口），會大大增加架構設計的復雜度，所以現在有很多網站只在移動端實現了響應式布局設計。
二、自適應網頁代碼上需要做出哪些調整
1、 阻止移動浏覽器自動調整頁面大小
iOS和Android浏覽器都基於webkit核心，這兩種浏覽器以及其他的很多浏覽器都支持viewport meta元素覆蓋默認的畫布縮放設置，只需在HTML的<head>標簽中插入一個<meta>標簽，<meta>標簽中可以設置具體的寬度(如像素值)或者縮放比例2.0(設備實際尺寸的兩倍)，下面是將一個頁面放大到設備實際尺寸兩倍顯示的meta標簽示例:
<meta name=”viewport” content=”initial-scale=2.0,width=device-width”/>
2、將網頁修改為百分比布局
當某個浏覽窗口處於媒體查詢固定的范圍之外，網頁就需要水平滾動才能完整浏覽，而通過百分比布局可以頁面元素根據窗口大小在一個又一個媒體查詢之間靈活修正樣式，具體來講，就是css代碼不會指定具體像素寬度：width:xxx px;而是會指定一個百分比寬度：width:xx%;或者直接就是width:auto;這裡大家可以根據一個簡易的公式將固定像素寬度轉換成對應的百分比寬度：目標元素寬度÷ 上下文元素寬度 = 百分比寬度
例如：
- <div id =”wraper”>
- <divid = “header”></div>
- </div>
- #wrapper {
- margin-right: auto;
- margin-left: auto;
- width: 960px;
- }
- #header {
- margin-right: 10px;
- margin-left:10px;
- width: 940px;
- }
轉換為百分比的header區塊的css為：
- #header {
- margin-right: 10px;
- margin-left: 10px;
- width: 97.916667% /* 940 ÷ 960 */
- }
3、用em替換px
同樣，目標元素寬度 ÷ 上下文元素寬度 = 百分比寬度這個公式也適用於將文字的像素單位轉換為相對單位，值得注意的是，現代浏覽器的默認文字都是16像素，因此一開始給body標簽應用下列任何一條規則所產生的效果都一樣:
- font-size: 100%;
- font-size:16px;
- font-size: 1em;
例如某網站網站標題相應的樣式:
- #logo {
- display: block;
- padding-top: 75px;
- color: #0d0c0c;
- font-family: Arial;
- font-size: 48px;
- }
修改後的樣式如下:
- #logo{
- display: block;
- padding-top: 75px;
- color: #0d0c0c;
- font-family:Arial;
- font-size:3em /* 48 ÷ 16 */
- }
4、流動布局（fluid grid）的使用
“流動布局”指的是各個區塊的位置都浮動，不是固定不變的。
- .