用戶體驗一直是網(wǎng)站優(yōu)化SEOer最注重的，一個好的網(wǎng)頁設計能給用戶帶來舒適的體驗。而很多用于SEO優(yōu)化的網(wǎng)站，對于筆者這樣的處女座來說，畫面實在“太美”不敢看...為了優(yōu)化而優(yōu)化的網(wǎng)站非常多，而看起來高大上的網(wǎng)站往往排名比較差，網(wǎng)站很多內(nèi)容寫下JS里面的，蜘蛛不抓取。秀站網(wǎng)SEO博客采用的是PC移動端自適應的方法，并沒有過多的采用JS效果，網(wǎng)站打開速度快。建議采用集成化的JS封包，功能豐富，代碼簡單。
純CSS實現(xiàn)PC瀏覽器（顯示屏幕）或移動端瀏覽器寬度樣式的自適應。將用到@media樣式進行判斷，不支持IE9以下版本，需要增加一個JS。
一般我們設計網(wǎng)頁的時候PC端寬度都在900-1400像素之間，移動端寬度在320-640像素之間，用@media樣式選擇可以讓PC端和移動端自適應，對簡單的文章、博客類網(wǎng)站可以不需要單獨開發(fā)移動端。移動端和PC端需要存在一一對應的關系，才能提交適配關系，網(wǎng)站權重才能不被分散，單獨的移動端優(yōu)化可以參考文章《手機端移動站優(yōu)化策略》。
css樣式選擇器寫法如下：
@media screen and (判斷屬性){
css樣式
}
不過多解釋， 看案例：
<style>
.main{height:400px;border:1px solid #eee}
@media screen and (min-width:1201px){
.main{width:1200px}
}
/*設置在屏幕（瀏覽器）不小于1201px時，main的寬度顯示寬度為1200px*/
@media screen and (max-width:1200px){
.main{width:900px}
}
/*設置在屏幕（瀏覽器）不大于1200px時，main的寬度顯示寬度為900px*/
</style>
必要說明：
注意css代碼的先后順序，必須尺寸由大到小。這里還要提到書寫格式也要按照上面的這樣寫，全部用英文字符，也可寫成壓縮的樣式：@media screen and (max-width:1200px){.main{width:900px}} 結(jié)果是有效，有些失效的原因注意檢查“and”的前后是否都有一個空格字符。
max-widht指展示的最大寬度，一般是瀏覽器窗口寬度。
max-device-width是指所展示使用的設備支持寬度，如一般電腦分辨率1280px，手機等移動設備支持展示寬度（安卓移動設備寬度如360 、480px）等。這個需要在</head>之前引用一段代碼：
<meta name="viewport" content="width=device-width, initial-scale=1" />
IE9以下兼容
為了兼容IE9以下版本瀏覽器，需要加入一個google的JS，或者下載到本地，再調(diào)用。把以下代碼加到</head>之前。
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
完整html代碼示例
其他p可以把樣式寫在同一個規(guī)則下，這樣寫在同一個css文件或者寫在html下，可以減少網(wǎng)頁加載鏈接次數(shù)，速度快，提高用戶體驗。頂部的聲明要這樣寫<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>秀站網(wǎng)秀站網(wǎng)博客</title>
<style>
.main{height:400px;border:1px solid #eee}
.head{height:100px;margin:0 auto;background:#c00}
@media screen and (min-width:1201px){
.main{width:1200px}
.head{width:1200px}
}
@media screen and (max-width:1200px){
.main{width:900px}
.head{width:900px}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<p class="main">DIV寬度會隨瀏覽器寬度變化哦，試試改變?yōu)g覽器寬度</p>
<p class="head">DIV寬度會隨瀏覽器寬度變化哦，試試改變?yōu)g覽器寬度1</p>
</body>
</html>
