vue3項目中如何做rem適配

配置flexible

1.在命令行中運行如下命令安裝

npm install lib-flexible --save-dev

2.在main.js中引入lib-flexible

import "lib-flexible";       // rem適配

3.在項目根目錄的 index.html 中添加如下 meta添加 meta 標籤

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

配置px2rem-loader

一般我們測量的設計稿的單位是px，爲了匹配不同的終端設備，我們需要適應不同的設備寬度，一般是將px轉換成rem在寫在樣式表中。 webpack 的 loader：px2rem-loader可以自動幫我們將 px 轉換成 rem。

安裝px2rem-loader

npm install px2rem-loader

在vue.config.js中配置

這裏的remUnit指的是你的換算基數哦，你想把設計稿分成多少個rem，即1rem=多少像素

 css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require("postcss-px2rem")({
            // 換算基數
            remUnit: 37.5
          })
        ]
      }
    }
  }

這樣子就可以啦，你就可以愉快的寫樣式表咯。設計稿測量是多少你就寫多少px，渲染的時候會自動轉換成rem哦。