在 CSS 适配倍图的时候哪种是正确的?

第一种:(自己写的)

@mixin bg-image($url,$type){
  [data-dpr="1"] & {
    background: url("/static/loginPicture/" + $url + ".png") no-repeat center center; 
  }
  [data-dpr="2"] & {
    background: url("/static/loginPicture/" + $url + "@2x.png") no-repeat center center;         
  }
  @if $type == 2{
    [data-dpr="3"] & {
      background: url("/static/loginPicture/" + $url + "@2x.png") no-repeat center center;        
    }
  }@else{
    [data-dpr="3"] & {
      background: url("/static/loginPicture/" + $url + "@3x.png") no-repeat center center;        
    } 
  }
}

第二种:(网上搜的)

@mixin bg-image($url){
    background: url("/static/loginPicture/" + $url + ".png") no-repeat center center;
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
      background: url("/static/loginPicture/" + $url + "@2x.png") no-repeat center center;
    }
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
      background: url("/static/loginPicture/" + $url + "@3x.png") no-repeat center center;
    }
}
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!