search

jackieli123723 / jackieli123723.github.io

✅lilidong 个人博客
9 stars 0 forks source link

移动端@2x,@3x高清屏处理 #5

Open jackieli123723 opened 7 years ago

jackieli123723 commented 7 years ago

sass.、less、styul解决方案

元素按二倍图元素大小设置

brand@2x.png == 60*36px

brand@3x.png ==90*54px

sass

@import "../../assets/scss/mixin.scss";

$ppr : 750/10/1rem;

//背景图
@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");
  }
}

  .demo {
      width: 60/$ppr;
      height: 36/$ppr;
      display: inline-block;
      vertical-align: top;
      @include bg-image('../../assets/images/brand');
      background-size: cover;
      margin-right: 12/$ppr;
    }

less

@import "../../assets/scss/mixin.less";

@ppr : 750/10/1rem;

//背景图
.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");
  }
}

  .demo {
      width: 60/@ppr;
      height: 36/@ppr ;
      display: inline-block;
      vertical-align: top;
      .bg-image('../../assets/images/brand');
      background-size: cover;
      margin-right: 12/@ppr ;
    }

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