web前端移动端设置2倍图与3倍图的方法

scss中设置变量$url

@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");
    }  
}

在需要的时候引入

<style lang="scss">
    @import "./common/scss/mixin.scss";
     .brand{
                     width: 30px;
                     height: 18px;
                     display: inline-block;
                     @include  bg-image('brand')
                 }

</style>