Pan的技术生涯

Appearance

Return to top
文章目录

图片适配

img 标签的图片适配

后端返回的图片

dpi-dpr 区别

前端写死的图片

html
<img src="默认图片" srcset="图片地址A 2.x, 图片地址B 3.x" />

如果浏览器不支持srcset, 则会显示src的图片， 否则如果浏览器的 dprdpr>=2 && dpr<3, 则显示图片地址A, 如果dpr>=3, 则显示图片地址B

css 背景图片的适配

通过 -webkit-image-set适配

css
.bg {
  background-image: url(images/a.png);
  background-image: -webkit-image-set(url(images/a2x.png) 2x, url(images/a3x.png) 3x);
  background-size: 100% 100%;
}

通过媒体查询器适配

css
@media all and (-webkit-min-device-pixel-ratio: 2) {
  .bg {
    background-image: url(images/a2x.png);
  }
}
@media all and (-webkit-min-device-pixel-ratio: 3) {
  .bg {
    background-image: url(images/a3x.png);
  }
}

scss 定义 mixin 来简化

scss
/**
不同设备采用多倍图
图片命名风格：
普通图片: xx.png
2倍图: xx@2x.png
3倍图: xx@3x.png

调用示例:
div{ 
    width:30px; 
    height:20px; 
    background-size:30px 20px; 
    background-repeat:no-repeat; 
    @include bgImage('special_1'); 
}
*/
@mixin bgImage($url) {
  background-image: url($url + '.png');
  @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    background-image: url($url + '@2x.png');
  }
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + '@3x.png');
  }
}