代理加盟 2019全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

您现在的位置: 188bet网 > 站长学院 > 建站教程 >

网站自适应布局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.ms88kzm.com/news/1365.html

    责任编辑:188bet网