响应式笔记（4）

1、三段媒体查询

@media only screen and (max- 50em) {

}

@media only screen and (min- 30.0625em) and (max- 50em){

}

@media only screen and (max- 30em) {

}

断点随着文字的大小而变化会更好一些。
1.如果网站针对特定的分表率，确实有功能的不同，建议断点（媒体查询）都设置为一个绝对的值（即PX）；
2.如果网站只是在展示样式上不同，功能都一样的话，那么媒体查询使用相对单位的长度吗，会让用户用更好的体验。

这里有坑：在媒体查询中，相对单位rem和em的基准高于html，所以与在html中设置的rem大小并不一致！
这里的rem或em依然是：1rem=1em=16px，所以800/16=50rem。
另外，rem兼容性不如em，故采用兼容性更好的em为媒体查询的断点单位。

2、响应式图片

1、三段媒体查询

@media only screen and (max- 50em) {

}

@media only screen and (min- 30.0625em) and (max- 50em){

}

@media only screen and (max- 30em) {

}

2、响应式图片

（1）、javascript实现

$(document).ready(function () {
    function makeImageResponsive() {
        var width = $(window).width();
        var img = $(".owl-carousel img");

        if (width <= 480) {
            img.attr("src","img/480.png");
        } else if (width <= 800) {
            img.attr("src","img/800.png");
        } else {
            img.attr("src","img/1600.png");
        }
        $(window).on("resize load",makeImageResponsive);
    }
});

（2）、通过html声明式来实现响应式图片： srcset方法：图片地址+空格+图片尺寸描述+逗号（用逗号分隔）

例子 <img class="image" src="../img.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w">

srcset需要与sizes配合使用，sizes属性默认设置为100vw，vw代表视口的宽度（viewport width），还有vh等，100vw代表100%viewport width。sizes中的单位也可以设置成px，em等单位

（3）、使用html标签来实现响应式图片：通过使用picture、source、 srcset来自主控制加载何种大小或格式的图片。

<source media="(orientation: landscape)"
    srcset="img/tiananmen-s.jpg 768w"></source>
<!--png类型-->
<source type="image/png" srcset="logo.png 480w, logo-m.png 800w, logo-l.png 1600w"></source>

<picture>
　　<source srcset="img/ad001-l.png" media="(min-50em)">
　　<source srcset="img/ad001-m.png" media="(min-30em)">
　　<img src="img/ad001.png" alt="">
</picture>

使用picture标签，为保证兼容性，需要使用Picturefill 库，在main.js前引入

<script srcset="js/picturefill.min.js"></script>