- rem适配方案之后,vw适配方案也是一个不错的选择
- 1vw单位为屏幕宽度的百分之一,使用插件 postcss-px-to-viewport 可以实现把页面中的 px 转化成 vw单位
- 创建 vue.config.js 文件
- 配置创建参数(viewportWidth为UI稿件的宽度,样式采用 跟UI稿件一样的尺寸即可,单位为px)
css: { loaderOptions: { postcss: { plugins: [ require("postcss-px-to-viewport")({ unitToConvert: "px", viewportWidth: 1125, unitPrecision: 3, propList: [ "*" ], viewportUnit: "vw", fontViewportUnit: "vw", selectorBlackList: [], minPixelValue: 1, mediaQuery: false, replace: true, exclude: /(\/|\\)(node_modules)(\/|\\)/, }) ] } } }