隨著移動時代的崛起，據統計，我國目前有10億手機用戶通過手機訪問網站，那麼我們做優化的當然也不能放掉移動端這一塊肥肉了，之前我們做網站包括優化網站都是PC端的網站優化，忽略的移動端。 到目前位置許多行業都很少有專門針對移動端的網站。 現在有些網站建設公司在做網站的時候喜歡向客戶推薦移動、pc兩種站點 ...
隨著移動時代的崛起，據統計，我國目前有10億手機用戶通過手機訪問網站，那麼我們做優化的當然也不能放掉移動端這一塊肥肉了，之前我們做網站包括優化網站都是PC端的網站優化，忽略的移動端。
到目前位置許多行業都很少有專門針對移動端的網站。 現在有些網站建設公司在做網站的時候喜歡向客戶推薦移動、pc兩種站點同時做，有些網路公司這兩個是獨立的網站，然後通過JS跳轉代碼，判斷用戶如果是手機用戶訪問，則自動跳轉到移動版，如果是pc用戶，自動留在pc端，但是這種不利於seo優化，做這種跳轉的朋友希望能夠及時改正，可以通過百度站長工具裡面的“移動適配”工具進行設置，即可完美優化移動端。
除了上述方法，襄陽seo網站建設給大家推薦一種《自適應網頁》，自適應網頁是通過css技術，只需要做一個pc端，在寫css文件的時候註意些，不管用電腦、移動、平板訪問都是自動適應，自動解析度的。
這種非常好的提高了用戶體驗，換個角度考慮如果你是手機訪問一個網站，看到的是pc，需要手動縮放才可以看清文字，你會感興趣嗎?所以大家一定敢要註重移動端，是未來三年內會和pc一樣普遍的。
說到這裡，許多人就開始想如果做一個優秀的自適應網站呢?我通過網上搜集資料，搜集了一些比較簡單的技巧，在建站的時候註意這些技巧，就可以完美解決自適應網頁設計，讓你擁有一個自適應電腦、手機、平板...的網站。
下麵就來為大家整理幾個自適應網頁設計 技巧1：MEAT標簽
IE8及其更低版本不支持media query，可以使用 media-queries.js或 respond.js腳本實現支持。
技巧 2. HTML結構
在這個例子中，頁面佈局包括 header， content container， sidebar， 和 footer。header固定高度為180px， content container寬600px，sidebar寬300px。
HTML結構圖
技巧3：Media Queries
CSS3 media query是自適應網頁設計的關鍵，他就像高級語言里的if條件語句，告訴瀏覽器根據不同的視口寬度(這裡等於瀏覽器寬度)來渲染網頁。 如果視口寬度小於等於980px，下麵規則生效。
這裡將容器像素寬度該用百分比，頁面排版更加靈活。
/* for 980px or less*/
@media screen and (max-width:980px){
#pagewrap{width:94%}
#content{width:65%}
#sidebar{width:30%}
}
如果視口寬度小於等於700px， 將#content 和#sidebar 寬度設為自動(auto width)，並移除它的浮動屬性(float)，這樣它會變成滿版顯示。
/* for 790px or less*/
@media screen and (max-width:700px){
#content{width:auto;float:none;}
#sidebar{width:auto;float:none;}
}
當視口寬度小於等於480px時(如手機屏幕)，將#header高度設為自動，h1 的字體大小設定為24px，並隱藏#sidebar。
/* for 480px or less*/
@media screen and (max-width:480px){
#header{height:auto;}
h1{font-size:24px;}
#sidebar{display:none;}
}
這裡的只是一個簡單的快速教程，希望對大家有用。
