postcss-pxtorem（或是postcss-px2rem）

npm?install?postcss-pxtorem?amfe-flexible?--save-dev

在入口文件?main.js?中引入?amfe-flexible（響應式適配）：

main.js

import 'amfe-flexible' // 自動設置 html 的 font-size

vue.config.js

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({css: {loaderOptions: {postcss: {postcssOptions: {plugins: [require('postcss-pxtorem')({rootValue: 192,unitPrecision: 5,propList: ['*']})]}}}}
})

rootValue 的值是根據屏幕分辨率寬或是設計稿寬度除以 10，例如1920 * 1080的設計稿，此處rootValue:192

但是每次打開調試工具欄后，或是改變瀏覽器窗口大小， html 的 font-size 總是會自動變化，很不方便。

可以將 html 和 body 的 font-size 設置成固定值然后不使用?amfe-flexible

    <style>html {font-size: 192px;}body {font-size: 16px;}</style>

此種方案的樣式需要寫在css中，對于行內style中的樣式不起作用

為使行內樣式也起作用可以使用??style-rem-loader

npm?install?style-rem-loader --save-dev

  chainWebpack: (config) => {config.module.rule('vue').test(/\.vue$/).use('style-rem-loader').loader('style-rem-loader').options({viewportWidth: 1920,unitPrecision: 5})},