响应式布局开发 -5

来源：互联网发布：java实现rpc 编辑：程序博客网时间：2024/06/03 19:59

这里写图片描述

（响应式广告）轮播图采用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的计算

0 0