vscode怎么自动将px转换成vw_Vue开发中的移动端适配（px转换成vw）

1.项目根目录下，创建 .postcssrc.js 文件。

2.安装插件。

-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

3.配置  .postcssrc.js

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

},

}

}

4. 根组件 App.vue 的style 中，加入以下样式:( 统一的宽度比默认属性 )

[aspectratio] {

position: relative;

}

[aspectratio]::before {

content: '';

display: block;

width: 1px;

margin-left: -1px;

height: 0;

}

[aspectratio-content] {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

width: 100%;

height: 100%;

}

/*vm兼容处理使用Viewport Units Buggyfill造成的副作用，需要如下设置img*/

img {

content: normal !important;

}

比如：想要一个 750:250 的比例容器，html中的代码：

它对应的css样式:

[w-750-250] {

width: 750px;

}

[w-750-250]{

aspect-ratio:'750:250';

}

5.vw的兼容处理 (有些手机不支持vw单位 )

5.1 Vue项目的index.html中引入如下JS 文件：

5.2 在html底部调用 viewport-units-buggyfill

window.onload = function () {

window.viewportUnitsBuggyfill.init({

hacks: window.viewportUnitsBuggyfillHacks

});

6.自己没用第5点的方式使用 viewport-units-buggyfill，而是使用了 npm 安装的方式引入。

6.1 npm  install  viewport-units-buggyfill  -S

6.2 项目的入口文件中(比如 main.js)，引入：

var hacks = require('viewport-units-buggyfill.hacks');

require('viewport-units-buggyfill').init({

hacks: hacks

});

本文只是学习并实践后的总结。插件不是都必须安装，可根据实际项目需要，自行决定。