導讀:DEDE技術DEDE技術用戶體驗是SEO最注重的,一個好的網頁設計能給用戶帶來舒適的體驗.很多用于SEO優化的網站,畫面實在難看,如果移動端能自適應最好盡量少調用JS,提高網站打開速度織夢文章模板dede模板安裝。

       用戶體驗一直是SEO最注重的，一個好的網頁設計能給用戶帶來舒適的體驗。而很多用于SEO優化的網站，畫面實在難看...為了優化而優化。如果移動端能自適應最好盡量少調用JS，提高網站打開速度。

       純CSS實現PC瀏覽器（顯示屏幕）或移動端瀏覽器寬度樣式的自適應。將用到@media樣式進行判斷，不支持IE9以下版本，需要增加一個JS。

       一般我們設計網頁的時候PC端寬度都在900-1400像素之間，移動端寬度在320-640像素之間，用@media樣式選擇可以讓PC端和移動端自適應，對簡單的文章類網站可以不需要單獨開發移動端。

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:12織夢模板免費00px){.main{width:900px}}  結果是有效，有些失效的原因注意檢查“and”的前后是否都有一個空格字符。

       max-widht指展示的最大寬度，一般是瀏覽器窗口寬度。

       max-device-width是指所展示使用的設備支持寬度，如一般電腦分辨率1280px，手機等移動設備支持展示寬度（安卓移動設備寬度如360 、480px）等。這個需要在</head>之前引用一段代碼：

  <meta name="viewport" content="width=device-width, initial-scale=1"  />

IE9以下兼容

       為了兼容IE9以下版本瀏覽器，需要加入一個google的JS，或者下載到本地，再調用。把以下代碼加到</head>之前。

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> 

關鍵詞標簽: DEDE技術 自適應 樣式