CSS—通过DPR设置加载不同的图片尺寸

1. 安装CSS预处理器

npm install stylus --save
npm install stylus-loader --save

2. 编写html结构

<template>
  <div class="no-data">
    <span class="no-data-images">
    </span>
  </div>
</template>

3. 编写样式，引入mixin.styl 文件，并调用方法

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl";
  .no-data
    text-align center
    font-size 0;
    margin: 0.26666rem 0
    .no-data-images
      display: inline-block
      width: 209px
      height: 146px
      bg-image('../../common/images/noData') 
      background-size: cover
      background-repeat: no-repeat
</style>

4. 打开mixin.styl 文件，编写 bg-image的方法

bg-image($url) // 创建bg-image($url)函数
  background-image: url($url + ".png")
  @media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
    background-image: url($url + "@2x.png")
  @media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3)
    background-image: url($url + "@3x.png")

5. 导入不同尺寸的图片到对应的目录位置