Vue3.0开发中的移动端适配（px转换成vw）不用修改原来的代码，特别爽

源：https://www.w3cplus.com/mobile/vw-layout-in-vue.html

这篇逻辑清晰 https://www.cnblogs.com/kdcg/p/9106463.html

解决vue移动端适配问题
https://www.cnblogs.com/both-eyes/p/10106021.html

errno错误码及含义（中文）
http://www.chinawenben.com/file/ecseoaecwzvs3triupro366z_1.html

如何移动端适配；
Vue-cli默认配置了上述三个PostCSS插件，但我们要完成vw的布局兼容方案，或者说让我们能更专心的撸码，还需要配置下面的几个PostCSS插件：

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

cssnano-preset-advanced

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

npm i cssnano-preset-advanced --save-dev

上面的建议一个一个下载，都下载好了再npm run dev不然会报很多错

如果网络不好建议用cnpm下载

接下来在.postcssrc.js文件对新安装的PostCSS插件进行配置：

如果vue3 没有就新建一个

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    "postcss-cssnext": {},
    "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-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

简单介绍上面几个插件的作用：

postcss-cssnext：其实就是cssnext。该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。有关于cssnext的每个特性的操作文档，可以点击这里浏览。

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

npm install cssnano-preset-advanced --save-dev

postcss-px-to-viewport：要用来把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。在配置中需要配置相关的几个关键参数：

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

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

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

这边我在vue3.0试了一下下载的，但是没效果

Administrator@Carl MINGW64 ~/Desktop/华夏项目/vue-cube-hx
$ npm install postcss-aspect-ratio-mini
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 1 package from 1 contributor and audited 24888 packages in 126.648s
found 0 vulnerabilities


Administrator@Carl MINGW64 ~/Desktop/华夏项目/vue-cube-hx
$ npm install postcss-px-to-viewport
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 1 package from 1 contributor and audited 24901 packages in 35.639s
found 0 vulnerabilities


Administrator@Carl MINGW64 ~/Desktop/华夏项目/vue-cube-hx
$ npm install  postcss-write-svg
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 10 packages from 4 contributors and audited 24916 packages in 44.975s
found 0 vulnerabilities


Administrator@Carl MINGW64 ~/Desktop/华夏项目/vue-cube-hx
$ npm install postcss-cssnext
npm WARN deprecated [email protected]: 'postcss-cssnext' has been deprecated in favor of 'postcss-preset-env'. Read more at https://moox.io/blog/deprecating-cssnext/
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 121 packages from 208 contributors and audited 25387 packages in 115.183s
found 0 vulnerabilities


Administrator@Carl MINGW64 ~/Desktop/华夏项目/vue-cube-hx
$ npm install cssnano
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
updated 2 packages and audited 26008 packages in 34.266s
found 0 vulnerabilities


Administrator@Carl MINGW64 ~/Desktop/华夏项目/vue-cube-hx
$ npm install postcss-viewport-units
pm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 9 packages from 3 contributors and audited 26022 packages in 40.203s
found 0 vulnerabilities


Administrator@Carl MINGW64 ~/Desktop/华夏项目/vue-cube-hx
$ npm install cssnano-preset-advanced
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 6 packages from 2 contributors and audited 26698 packages in 38.487s
found 0 vulnerabilities

Administrator@Carl MINGW64 ~/Desktop/华夏项目/vue-cube-hx
$ npm install postcss-import
npm WARN rollback Rolling back [email protected] failed (this is probably harmless): EPERM: operation not permitted, scandir 'C:\Users\Administrator\Desktop\华夏项目\vue-cube-hx\node_modules\fsevents\node_modules'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 3 packages from 3 contributors and audited 26715 packages in 47.655s
found 0 vulnerabilities

Administrator@Carl MINGW64 ~/Desktop/华夏项目/vue-cube-hx
$ npm install postcss-url
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 3 packages from 2 contributors and audited 26736 packages in 28.834s
found 0 vulnerabilities

除了zui上面那些还下载了:
postcss-import
postcss-url

其实还是有效果的