网站自适应布局JS控制图片高度等于宽度

       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>

转载请注明来源网址：https://www.mubanyun.com/news/1365.html