移动端的高清图适配 - less 实现

移动端根据不同设备的屏幕像素比，应该使用不同倍率的图片，保证像素比高的设备尽可能清晰，像素比低的只加载2倍图，不浪费用户流量。某些场景可以使用SVG替代去保证清晰度。针对不同的场景，大概有下面3种方式去处理：

1. 背景图
   借助 less 语言,提供了.bg-image()函数,直接参数形式写入图片名字和文件后缀即可，提前准备2X/3X图，命名格式为[email protected]、[email protected]，less示例代码；

   // 2倍图、3倍图处理:
    //  1.注意参数传入时,url的拼接方式;
    //  2.注意路径的写法,这可以保证从传入的url去查找图片;
   .bg-image(@url, @ext) {
     background-image: ~"url('@{url}@2x.@{ext}')";
     @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
       background-image: ~"url('@{url}@3x.@{ext}')";
     }
   }

   @import "~assets/style/common/mixin";
   
   .container {
     /* 如果定义了:global,可能需要用相对地址. */
     .bg-image("assets/images/test", "png");
   }

2. img 标签引入的图片
   根据 window.devicePixelRatio 判断设备像素比，require 或 import 不同的 @2x/@3x 的图片，写入 src 即可。

3. 另一种高清图方案是，动态在 html 标签写入了 data-img-rate 属性，只会有两种值，2 或 3，设备像素比大于等于3的 data-img-rate="3"，否则均为 data-img-rate="2":

   .bg-img {
     background-image: url(assets/images/[email protected]);
   }
   
   [data-img-rate="3"] .bg-img {
   background-image: url(assets/images/[email protected]);
   }

   同样，这种方案也可以封装个less方法公用。