天龙八部手游版下载|天龙八部手游贴吧

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

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

網站自適應布局JS控制圖片高度等于寬度

來源:未知 發布時間:2019-03-30熱度:我要評論
PC和WAP端自適應布局對用戶體驗非常好,由于兩個平臺的URL只有一個,不存在權重分散的情況。設計起來表面復雜,其實比設計兩個不同的模板更簡單些,風格一般簡潔大氣。如果兩個樣式差異太大,還是應該選擇分開設計。 網站自適應比較難處理的是圖片,一般圖片CSS用百分...

       PC和WAP端自適應布局對用戶體驗非常好,由于兩個平臺的URL只有一個,不存在權重分散的情況。設計起來表面復雜,其實比設計兩個不同的模板更簡單些,風格一般簡潔大氣。如果兩個樣式差異太大,還是應該選擇分開設計。

自適應布局圖片高度等于寬度

       網站自適應比較難處理的是圖片,一般圖片CSS用百分比來控制,比如

<ul class="imgbox">
 <li><a href='#'><img src="http://www.vi586.com/images/1.jpg"></a></li>
 <li><a href='#'><img src="http://www.vi586.com/images/2.jpg"></a></li>
</ul>

css樣式選擇器寫法

@media screen and (判斷屬性){
css樣式
}

      不過多解釋, 看案例:

<style>
/*屏幕(瀏覽器)不小于1201px的樣式*/
@media screen and (min-width:1201px){
.imgbox li{float:left;width:50%;height:auto}
}
/*屏幕(瀏覽器)不大于1200px的樣式*/
@media screen and (max-width:1200px){
.imgbox li{float:none;width:100%;height:auto}
}
</style>

       以適應不同的設備訪問,但寬度和高度都變自適應后,如果每張圖片寬高不一樣,排版就會出現錯亂,一般以最高的那張圖為下一張圖的起點,出現空白。只能通過JS控制高度。比如高度等于寬度:先引用jquery,自己下一個。在</head>或</body>前添加代碼

<script type="text/javascript">$(document).ready(function(){$('.imgbox img').css('height',$('.imgbox img').css('width'));})</script>

本文地址:http://www.tbxuq.icu/news/1365.html

    責任編輯:秀站網

    發表評論

    評論列表(條)

      天龙八部手游版下载