(响应式广告)轮播图采用OwlCarousel2来使用
http://owlcarousel2.github.io/OwlCarousel2/
zepto是针对移动端的一个类似jquery的库;
按照文档引入https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html。
样式引用放在上面,脚本引用放在下面
ad层主要控制位置和大小,所以最好在里面添加一个div来操作轮播的设置
支持延迟加载噢,节省网络带宽
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
items:1,
loop:true,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true
});
});
响应式图片
1第一种方法,命令式(硬编码)实现(需要实现响应式逻辑,修改过于繁琐)
把屏幕或者设备信息写入cookie,在获取图片时候在服务器端决定使用哪种图片
2把图片地址声明在html中用浏览器来决定使用哪种方式加载图片,更灵活。
DPR设备像素比,一个像素点会使用四个像素=mac=dpr:2;
当DPR=2时,480像素会被当作240像素
浏览器行为:DPR,分辨率,图片质量,网络(算法比较复杂)
当图片缓存后,浏览器会使用画质高的图片呈现,无论页面大小
当父容器改变(变小)时,图片还是会按照原大小进行缩放,所有这个时候我们需要另一个属性sizes
vw=viewport width视口宽度,设置了这个属性计算是以视口宽度进行选择,就与父容器无关了,支持媒体查询,px,em,vw.
sizes="(min-width:800px) calc(100vw - 30em),100vw "
计算的时候不要忘记在运算符两边加空格,否则无法解析。
当页面低于八百的时候,会按照100vw来计算图片。
picture可以拿回更多的图片自主控制权,一步一步来查找匹配的source
可以在不同大小的页面利用媒体查询来显示不同裁切后的图片,横屏也可以
web是谷歌开发的一种图片格式,不过只有谷歌和安卓支持,webp的大小是jpg的三分之二。
SVG
可缩放的矢量图形,基于可扩展语言来生成的。矢量图形缺点:很难表现色彩层次丰富的效果
polyfill填平浏览器兼容性的坑。对于响应式图片,最有名的polyfill就是picturefillk库。对于不支持picture的浏览器,获取srcset和我们媒体查询规则,然后利用js决定输出什么样的图片
http://scottjehl.github.io/picturefill/
<div class="container">
<div class="transaction clearfix">
<div class="trans-content">
<div class="trans-data">
<span>平台累计成交金额</span>
<span class="trans-money">2017</span>
<span>万元</span>
</div>
<div class="trans-data">
<span>过去7日成交金额</span>
<span class="trans-money">2017</span>
<span>万元</span>
</div>
<div class="trans-report">
<a href="#">查看平台运营报告</a>
</div>
</div>
</div>
<div class="ad">
<div class="owl-carousel owl-theme">
<div class="item">
<picture>
<source srcset="img/ad001-l.png" media="(min-width: 50em)">
<source srcset="img/ad001-m.png" media="(min-width: 30em)">
<img src="img/ad001.png" alt="2015年度报告">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad002-l.png" media="(min-width: 50em)">
<source srcset="img/ad002-m.png" media="(min-width: 30em)">
<img src="img/ad002.png" alt="新年红包">
</picture>
</div>
<div class="item">
<picture>
<source srcset="img/ad003-l.png" media="(min-width: 50em)">
<source srcset="img/ad003-m.png" media="(min-width: 30em)">
<img src="img/ad003.png" alt="新手秘籍">
<picture>
</div>
</div>
</div>
取消了对DPR的计算