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