vue項目中 —— rem布局適配方案

1、安裝插件 

安裝 amfe-flexible、postcss-px2rem-exclude

cnpm i amfe-flexible postcss-px2rem-exclude --save

安裝完畢，會在 package.json 文件的 dependencies 屬性中看到如下：

 

 

 

 

2、在main.js文件中引入

import 'amfe-flexible'

 

3、配置postcss.config.js

如果你的設計圖是750px，可以在新建 postcss.config.js 文件中做如下配置:

module.exports = {
    plugins: {
          autoprefixer: {},
          "postcss-px2rem-exclude": {
                "remUnit": 75,
                "exclude": /node_modules/i
          }
    }
}

這里添加了 exclude 屬性是為了過濾第三方 ui 組件，對他們的樣式不進行 rem 轉換。

這樣的話，就可以參照設計稿進行1比1開發了。

 

4、測試

npm run serve 啟動項目，然后，在 About.vue 組件中隨便測試一下：

 

 

 

 

 看，正好是屏幕的一半寬，而且 vant 框架中的 Toast 組件也顯示正常。

 

參考文章：

https://blog.csdn.net/u012878818/article/details/88190907

https://www.cnblogs.com/guandekuan/p/10551711.html