移动端适配以及2x图、3x图的使用

1、怎么使用2x图、3x图

(1)定义mixin.less文件

    /* 根据dpr显示2x图/3x图 */
    .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')";
      }
     }
    
     .bg-color(@color) {
       background-color: @color;
     }

(2)style中引用

    文件引入：@import "../../../static/css/mixin.less";
    在样式中使用：.bg-image("./src/assets/icon/成功");
2、使用postcss-px2rem

(1)安装

    npm install --save-dev postcss-px2rem

(2)在vue-loader.conf.js中配置

 'use strict'
    const utils = require('./utils')
    const config = require('../config')
    const isProduction = process.env.NODE_ENV === 'production'
    const sourceMapEnabled = isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap
    
    module.exports = {
      loaders: utils.cssLoaders({
        sourceMap: sourceMapEnabled,
        extract: isProduction
      }),
      cssSourceMap: sourceMapEnabled,
      cacheBusting: config.dev.cacheBusting,
      transformToRequire: {
        video: ['src', 'poster'],
        source: 'src',
        img: 'src',
        image: 'xlink:href'
      },
      // 换算的基数： 1rem = 75px;dpr=2
      postcss:[require('postcss-px2rem')({'remUnit':75,'baseDpr':2})]
    }