响应式图片 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/css.css"/>
<script src="js/picturefill.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="imgContainer">
            <h2>picture source media</h2>
            <picture>
                <source media="(max-width:480px)" srcset="img/480x320.gif">
                <source media="(max-width:640px)" srcset="img/640x427.gif">
                <source media="(max-width:720px)" srcset="img/720x480.gif">
                <source media="(max-width:900px)" srcset="img/900x600.gif">
                <img src="img/900x600.gif" alt="" />
            </picture>
            <h2>srcset设置响应式图片</h2>
            <img sizes="(min-width:900px) 900px, 100vw"
                 srcset="img/480x320.gif 480w,
                         img/640x427.gif 640w,
                         img/720x480.gif 720w,
                         img/900x600.gif 900w"
                 src="img/480x320.gif" alt="responsive images" />
        </div>
    </body>
</html>
.imgContainer{
    max-width: 1000px;
    margin: auto;
}
.imgContainer h2{
    font-size: 2vw;
}
.imgContainer img{
    width: 100%;
}

媒体查询遵循移动优先原则

posted @ 2016-07-04 13:21  灬東歌℡  阅读(136)  评论(0)    收藏  举报