代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 站長學院 > 建站教程 >

CSS實現不同分辨率下樣式自適應

來源:未知 發布時間:2019-03-30熱度:我要評論
用戶體驗一直是網站優化SEOer最注重的,一個好的網頁設計能給用戶帶來舒適的體驗。而很多用于SEO優化的網站,對于筆者這樣的處女座來說,畫面實在太美不敢看...為了優化而優化的網站非常多,而看起來高大上的網站往往排名比較差,網站很多內容寫下JS里面的,蜘蛛不抓?...

織夢模板免費下載,無需注冊無需充值

css實現網頁自適應

       用戶體驗一直是網站優化SEOer最注重的,一個好的網頁設計能給用戶帶來舒適的體驗。而很多用于SEO優化的網站,對于筆者這樣的處女座來說,畫面實在“太美”不敢看...為了優化而優化的網站非常多,而看起來高大上的網站往往排名比較差,網站很多內容寫下JS里面的,蜘蛛不抓取。秀站網SEO博客采用的是PC移動端自適應的方法,并沒有過多的采用JS效果,網站打開速度快。建議采用集成化的JS封包,功能豐富,代碼簡單。

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

       一般我們設計網頁的時候PC端寬度都在900-1400像素之間,移動端寬度在320-640像素之間,用@media樣式選擇可以讓PC端和移動端自適應,對簡單的文章、博客類網站可以不需要單獨開發移動端。移動端和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: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以下兼容

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

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

完整html代碼示例

       其他p可以把樣式寫在同一個規則下,這樣寫在同一個css文件或者寫在html下,可以減少網頁加載鏈接次數,速度快,提高用戶體驗。頂部的聲明要這樣寫<!DOCTYPE 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>
 <p class="main">DIV寬度會隨瀏覽器寬度變化哦,試試改變瀏覽器寬度</p>
<p class="head">DIV寬度會隨瀏覽器寬度變化哦,試試改變瀏覽器寬度1</p>
</body>
</html> 

本文地址:http://www.yxrxyy.live/news/1455.html

責任編輯:秀站網

    發表評論

    評論列表(條)

      北京28是什么彩票