图片适配
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');
}
}