轮播组件 OwlCarousel2

官网:https://owlcarousel2.github.io/OwlCarousel2/
安装方法:https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html
使用API找到Options中配置项
items 图片显示数量
loop 循环
autoplay 是否轮播
autoplayTimeout 切换时间
nav 上一个和下一个导航按钮

$(document).ready(function(){
    $(".owl-carousel").owlCarousel({
        items:1,
        loop:true,
        autoplay:true,
        autoplayTimeout:3000
    });
});         

响应式图片

1. js或服务端
2. srcset
3. srcset配合sizes
4. picture
5. svg

<div class="content">
    <img src="img/480.png" alt="" 
    srcset="img/480.png 480w,img/800.png 800w,img/1600.png 1600w"
    sizes="(min-width:800px) calc(100vw - 30rem),100vw ">
</div>

当设置了srcset以后,浏览器会根据w的宽度去加载不同设置的图片,但是如果是已经加载过1600的图片,再缩小屏幕仍旧是1600,因为浏览器已经加载过1600大小的图片,不会占用网络资源,因此不会再去改变图片.
当设置DPR为2的时候,也就是说用Retina屏幕时,像素比会改变,原来的一个像素点会有四个像素点,但是240时,仍旧不会变,因为浏览器本身也还会考虑DPR值和图片的质量,综合算法很复杂,因此会比240大一些.
只设置srcset的坑
当content的容器变小的时候,如果width:50%,img在240px时就会改变图片.因此要设置sizes.
sizes="100vw"是默认值,图片会根据sizes中的视口大小而改变相应的值,不管容器大小.
vw viewport width
vh viewport height

picture标签

<picture>
    <source media="(max-width:36em)" srcset="img/tiananmen-s.jpg 768"/>
    <source src="img/tiananmen.jpg 1800w">
    ![](img/tiananmen.jpg)
</picture>

svg

矢量图片,不会失贞.创建svg图片:http://editor.method.ac http://icomoon.io

polyfill

解决picture不兼容问题http://scottjihl.github.io/picturefil

压缩

svg压缩 http://iconizr.com
png,jpg压缩:http://tinypng.com