图片适配

1 根据设备像素比适配图片

1.1 方式一 背景图方式

.banner-bg {
    margin: 0 auto;
    width: 414px;
    height: 650px;
    background-image: url('images/music_small.png');
    background-size: 414px 650px;
}
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) {
    .banner-bg {
        background-image: url('images/music_small_2x.png');
    }
}

1.2 方式二 <picture>标签

<picture>
    <source srcset="images/music_small_2x.png" media="(-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) ">
    <source srcset="images/music_small.png">
    <img src="images/music_small.png" alt="music">
</picture>

1.3 方式三 <img>标签

<img srcset="images/music_small.png,
             images/music_small_2x.png 2x,
             images/music_small_3x.png 3x"
     src="images/music_small.png"
     alt="图片适配">

2 响应式中的图片适配

既考虑视口宽度又考虑设备像素比:

 .banner-bg {
     margin: 0 auto;
     width: 414px;
     height: 650px;
     background-image: url('images/music_small.png');
     background-size: 414px 650px;
}
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) {
    .banner-bg {
        background-image: url('images/music_small_2x.png');
    }
}

@media (min-width: 762px) {
    .banner-bg {
        width: 701px;
        height: 400px;
        background-image: url('images/music_medium.png');
        background-size: 701px 400px;
    }
}
@media (min-width: 762px) and (-webkit-min-device-pixel-ratio: 2),(min-width: 762px) and (min-resolution: 2dppx) {
    .banner-bg {
        background-image: url('images/music_medium_2x.png');
    }
}

@media(min-width: 1080px) {
    .banner-bg {
        margin: 0 30px;
        width: 1380px;
        height: 499px;
        background-image: url('images/music_large.png');
        background-size: 1380px 499px;
    }
}
@media (min-width: 1080px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 1080px) and (min-resolution: 2dppx) {
    .banner-bg {
        background-image: url('images/music_large_2x.png');
    }
}


results matching ""

    No results matching ""