在Vue项目中使用vw实现移动端适配（淘宝无线端实现方案）_如何在vue项目中使用vw实现移动端适配-优快云博客

1.要完成vw的布局兼容方案，或者说让我们能更专心的撸码，还需要配置下面的几个PostCSS插件

npm install postcss-aspect-ratio-mini  postcss-px-to-viewport  postcss-write-svg  postcss-cssnext postcss-viewport-units cssnano --save

2、接下来在.postcssrc.js文件对新安装的PostCSS插件进行配置（750px的设计稿）

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,
      viewportHeight: 1334,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false
    }
  },
  "postcss-viewport-units": {},
  "cssnano": {
    "preset": "advanced",
    "autoprefixer": false,
    "postcss-zindex": false
  }
}

注意：

目前出视觉设计稿，我们都是使用750px宽度的，那么100vw = 750px，即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。在实际撸码过程，不需要进行任何的计算，直接在代码中写px。在不想要把px转换为vw的时候，首先在对应的元素（html）中添加配置中指定的类名。.ignore或.hairlines。

说明 :