在Vue项目中使用vw实现移动端适配postcss-import主要功有是解决@import引入路径问题。使用这个插件，

rem适配并非万能，存在有些机型屏幕无法适配的问题，如华为手机p20，nova系列适配很差

产生这个情况的原因可能是因为给html附font-size时，附上的font-size和实际上html的font-size 大小并不一致

引入afme-flexible再次修改fontsize*1.25,测试发现nova手机上有效，但是p20手机未知原因无效，所以是时候选择新的适配了

新建.postcssrc.js

module.exports = {
    "plugins": {
        "postcss-write-svg": {
            utf8: false
        },
        "postcss-preset-env": {},
        "postcss-px-to-viewport": {
            viewportWidth: 375,     // (Number) The width of the viewport.
            viewportHeight: 667,    // (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.
            selectorBlackList: ['.ignore', '.hairlines'],  // (Array) The selectors to ignore and leave as px.
            minPixelValue: 1,       // (Number) Set the minimum pixel value to replace.
            mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
        }, 
        "postcss-viewport-units":{},
        "cssnano": {
            preset: "default",
            autoprefixer: false,
            "postcss-zindex": false
        }
    }
}

npm 安装

npm i postcss-px-to-viewport postcss-write-svg postcss-preset-env postcss-viewport-units cssnano --S

postcss-import主要功有是解决@import引入路径问题。使用这个插件，可以让你很轻易的使用本地文件、node_modules或者web_modules的文件。这个插件配合postcss-url让你引入文件变得更轻松。(?required：false)
postcss-url相关配置可以点击这里。该插件主要用来处理文件，比如图片文件、字体文件等引用路径的处理。在Vue项目中，vue-loader已具有类似的功能，只需要配置中将vue-loader配置进去。(?required：false)
autoprefixer插件是用来自动处理浏览器前缀的一个插件。如果你配置了postcss-cssnext，其中就已具备了autoprefixer的功能。在配置的时候，未显示的配置相关参数的话，表示使用的是Browserslist指定的列表参数，你也可以像这样来指定last 2 versions 或者 > 5%。如此一来，你在编码时不再需要考虑任何浏览器前缀的问题，可以专心撸码。这也是PostCSS最常用的一个插件之一
postcss-aspect-ratio-mini 主要用来处理元素容器宽高比。在实际使用的时候，具有一个默认的结构(?required：false)
postcss-px-to-viewport 插件主要用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一目前出视觉设计稿，我们都是使用750px宽度的，那么100vw = 750px，即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。在实际撸码过程，不需要进行任何的计算，直接在代码中写px

在配置中需要配置相关的几个关键参数：

"postcss-px-to-viewport": {
    viewportWidth: 750,      // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
    viewportHeight: 1334,    // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
    unitPrecision: 3,        // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
    viewportUnit: 'vw',      // 指定需要转换成的视窗单位，建议使用vw
    selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
    minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
    mediaQuery: false       // 允许在媒体查询中转换`px`
}

postcss-write-svg 插件主要用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理

@svg border-1px {
  height: 4px;
  width: 4px;
  @rect {
    fill: transparent;
    width: 100%;
    height: 100%; // 高度为4px * 100%
    stroke-width: 25%; // 边框宽度 4px * 25%(即1px)
    stroke: var(--color, black); // 颜色
  }
}
.test{
  margin: 100px;
  height: 50px;
  width: 50px;
  border:1px solid;
  border-image:svg(border-1px param(--color red)) 1 stretch;
}

postcss-cssnext 其实就是cssnext。该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理 postcss-preset-env（已过时推荐使用）
cssnano 主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。不过你也可以使用postcss-loader显式的使用cssnano。上面的代码把autoprefixer和postcss-zindex禁掉了。前者是有重复调用，后者是一个讨厌的东东。只要启用了这个插件，z-index的值就会重置为1。这是一个天坑，千万记得将postcss-zindex设置为false。
postcss-viewport-units 插件主要是给CSS的属性添加content的属性，配合viewport-units-buggyfill库给vw、vh、vmin和vmax做适配的操作。这是实现vw布局必不可少的一个插件，因为少了这个插件，这将是一件痛苦的事情这个插件将让你无需关注content的内容，插件会自动帮你处理

但是content也会引起一定的副作用。比如img和伪元素::before(:before)或::after（:after）。在img中content会引起部分浏览器下，图片不会显示。这个时候需要全局添加：

img {
    content: normal !important;
}

但还有不支持的，比如下表中的No，表示的就是不支持

最终的解决方案，就是使用viewport的polyfill：Viewport Units Buggyfill。使用viewport-units-buggyfill主要分以下几步走：

引入JavaScript文件

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

第二步，在HTML文件中调用viewport-units-buggyfill，比如：

<script>
    window.onload = function () {
        window.viewportUnitsBuggyfill.init({
            hacks: window.viewportUnitsBuggyfillHacks
        });
    }
</script>