POST TIME:2017-11-13 00:40
用戶體驗一直是SEO最注重的，一個好的網頁設計能給用戶帶來舒適的體驗。而很多用于SEO優化的網站，畫面實在難看...為了優化而優化。如果移動端能自適應最好盡量少調用JS，提高網站打開速度。
純CSS實現PC瀏覽器（顯示屏幕）或移動端瀏覽器寬度樣式的自適應。將用到@media樣式進行判斷，不支持IE9以下版本，需要增加一個JS。
一般我們設計網頁的時候PC端寬度都在900-1400像素之間，移動端寬度在320-640像素之間，用@media樣式選擇可以讓PC端和移動端自適應，對簡單的文章類網站可以不需要單獨開發移動端。
@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}} 結果是有效，有些失效的原因注意檢查“and”的前后是否都有一個空格字符。
max-widht指展示的最大寬度，一般是瀏覽器窗口寬度。
max-device-width是指所展示使用的設備支持寬度，如一般電腦分辨率1280px，手機等移動設備支持展示寬度（安卓移動設備寬度如360 、480px）等。這個需要在</head>之前引用一段代碼：
<meta name="viewport" content="width=device-width, initial-scale=1" />
為了兼容IE9以下版本瀏覽器，需要加入一個google的JS，或者下載到本地，再調用。把以下代碼加到</head>之前。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
其他div可以把樣式寫在同一個規則下，這樣寫在同一個css文件或者寫在html下，可以減少網頁加載鏈接次數，速度快，提高用戶體驗。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無標題文檔</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>
<div class="main">DIV寬度會隨瀏覽器寬度變化哦，試試改變瀏覽器寬度</div>
<div class="head">DIV寬度會隨瀏覽器寬度變化哦，試試改變瀏覽器寬度1</div>
</body>
</html>
| ? |
|
|
|
|||||||||||||||
| 全國咨詢熱線 | |||||||||||||||||
| 400-1100-266 | |||||||||||||||||
| 在線客服( QQ：340506921 ) | |||||||||||||||||
 |
|||||||||||||||||
