轮播组件 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
});
});
响应式图片
- js或服务端
- srcset
- srcset配合sizes
- picture
- 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">
</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
