postcss.config.js 配置(vue移动端自适应)

  安装依赖

 npm install postcss-write-svg  postcss-px-to-viewport-multichange --D

 直接在根目录下创建postcss.config.js

module.exports = {

  plugins: {

    // autoprefixer: {},  // cssnext中启用

    // 'postcss-import': {},

    // 'postcss-url': {},

    // 'postcss-preset-env': {},

    // 'postcss-aspect-ratio-mini': {},

    'postcss-write-svg': { utf8: false },

    'postcss-px-to-viewport-multichange': {

      // 使用非官方开发的可以自定义针对UI库的处理函数的插件

      viewportWidth: 750, // (Number) The width of the viewport.

      viewportHeight: 1334, // (Number) The height of the viewport.

      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.

      viewportUnit: 'vw', // (String) Expected units.

      fontViewportUnit: 'vmin', // (String) Expected units for font.

      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.

      mediaQuery: false, // (Boolean) Allow px to be converted in media queries.

      // selectorBlackList: [

      //   '.ignore',

      //   '.hairlines',

      //   /\.hairline[\w-_]*/,

      //   /\.van-hairline[\w-_]*/,

      // ], // (Array) The selectors to ignore and leave as px.

     

      // 以下为此插件新增配置项

      // exclude: ['node_modules'],

      // multiple: 100,

      // rules: {

      //   path: 'vant',

      //   fn(pixels, translated) {

      //     return `${translated * 2}vw`;

      //   },

      // },

    },

    cssnano: {},

  },

};

postcss.config.js 配置(vue移动端自适应)

重新跑一遍代码

上一篇:boost::units模块实现用常量测试所有运算符的组合的测试程序


下一篇:代码片段-计算文件字节大小,以合适的单位显示