scss解决2x,3x背景图片问题

移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小:

一. 2x,3x图片原理:

1. 通过mixin语法, 动态修改background-image。

2. 通过@media (媒体查询)，判断设备的dpr。

3. scss代码:

@mixin bg-image($url) {
    background-image: url($url + "@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
        background-image: url($url + "@3x.png");
    }
}

二. 在需要添加这种背景图片的选择器中使用

@include bg-image(图片url中截取@2x.png或者@3.png之前的路径)

比如@include bg-image('../../img/1-'); 是因为期望的图片有../../img/[email protected], ../../img/[email protected];

& .header {
    position: relative;
    height: 200px;
    width: 100%;
    background-color: #ff5555;
    z-index: 9;
    @include bg-image('../../img/1-');
    background-repeat: no-repeat;
    background-size: cover;
  }