vueCli3 移动端px自动转换vw适配

-D （开发依赖）

postcss-import

postcss-url

cssnano-preset-advanced

-S （开发、运行都依赖）

postcss-aspect-ratio-mini

postcss-px-to-viewport
postcss-write-svg
postcss-cssnext
cssnano
postcss-viewport-units

安装

yarn add postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --save

yarn add cssnano-preset-advanced postcss-url postcss-import -D

 

在postcss.config.js文件对新安装的PostCSS插件进行配置：

module.exports = {
    "plugins": {
      "postcss-import": {},
      "postcss-url": {},
      // 使用postcss的插件实现vw适配移动端
      // 由于cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false
      'postcss-aspect-ratio-mini': {}, // 用来处理元素容器宽高比
      'postcss-write-svg': { // 用来处理移动端1px的解决方案
        uft8:false
      },
      'postcss-cssnext': {}, // 让项目使用CSS未来特性 并对其做兼容性处理
      'postcss-px-to-viewport': {
        viewportWidth: 750, // 视窗的宽度，对应我们设计稿的宽度，一般是750
        viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
        unitPrecision: 3, // 指定'px'转换为视窗单位值得小数位数（很多时候无法整除）
        viewportUnit:'vw', // 指定需要转换成的视窗单位,建议使用vw
        selectorBlackList: ['.ignore','.hairliness'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值。
        mediaQuery: false // 允许在媒体查询中转换`px`
      },
      'postcss-viewport-units': {}, // 给CSS的属性添加content的属性 配合viewport-units-buggyfill解决个别手机不支持vw
      'cssnano': { // 压缩和清理CSS代码
        preset: 'advanced',
        autoprefixer: false,
        'postcss-zindex': false
      }
    }
  }

postcss-cssnext:其实就是cssnext。该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。

cssnano:主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它,在cssnano的配置中，使用了preset: advanced，所以我们需要另外安装：

cnpm i cssnano-preset-advanced --save-dev

postcss-px-to-viewport:要用来把px单位转换为vw、vh、vmi n或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。

postcss-aspect-ratio-mini:主要用来处理元素容器宽高比。

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

注意，如果在项目中使用了ui框架，可能会出现框架ui组件显示变小的问题，这是由于vw转换时将框架单位也转换成vw单位，解决的方案有以下几种。

1.改写框架的ui组件的css样式，也是比较简单的方法。
2.在postcss.config.js中的selectorBlackList选项中增加不需要vw转换的类名，

 

selectorBlackList: ['.ignore', '.hairlines']

 

vw兼容方案: 兼容个别手机

• 主要使用viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js，只需要在你的HTML文件中引入这两个文件。比如在Vue项目中的index.html引入它们
• <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

<!--使用viewport-units-buggyfill解决个别手机不支持vw-->
<script>
  window.onload = function () {
    window.viewportUnitsBuggyfill.init({
      hacks: window.viewportUnitsBuggyfillHacks
    });
  }
</script>