第一步安装

npm install amfe-flexible -S
npm install postcss-px2rem -S

第二步引入 lib-flexible

在入口main.js中 引入 lib-flexible
import "amfe-flexible/index.js";

注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!!

配置postcss-px2rem

vuecli3 配置

px2rem的配置放在vue-cli3 项目中vue.config.js中(找不到?可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js)
具体配置内容如下:
postcss-pxtorem 在postcss.config.js中配置

module.exports = {
    css: {
        loaderOptions: {
          css: {},
          postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 37.5
          })
        ]
      }
        }
    }
}

使用方法
按照上面的步骤写完后,使用时设计图750px的,那设计图要是300px的宽度,那代码里面写成300px。这样就可以了

Logo

前往低代码交流专区

更多推荐