安裝：
npm install postcss-pxtorem -D
vue.config.js文件設置：
css: {loaderOptions: {scss: {additionalData: `@import "~element-ui/packages/theme-chalk/src/common/var.scss";@import"@/styles/variables.scss";`},postcss: {postcssOptions: {plugins: [require("postcss-pxtorem")({// 配置文檔：https://www.npmjs.com/package/postcss-pxtoremrootValue: 16, // 根元素字體大小 16/1.25unitPrecision: 5, // 轉換成rem后保留的小數點位數propList: ["*"], // 匹配CSS中的屬性，* 代表啟用所有屬性// exclude: /(node_module)/, // 忽略一些文件，不進行轉換，默認false，可以（reg）利用正則表達式排除某些文件夾的 方法，例如/(node_module)/ 。如果想把前端UI框架內的px也轉換成rem，請把此屬性設為默認值mediaQuery: false, //（布爾值）允許在媒體查詢中轉換pxminPixelValue: 1, // 設置要替換的最小像素值}),],},},}},
創建一個js文件，引入main.js文件
// 基準大小
const baseSize = 16;
// 設置 rem 函數
function setRem() {// 當前頁面寬度相對于 1920 寬的縮放比例，可根據自己需要修改。const scale = document.documentElement.clientWidth / 1920;// 設置頁面根節點字體大小，設置個最小值，避免字體太小let fontSize = Math.max(baseSize * Math.min(scale, 2) ,12) document.documentElement.style.fontSize = fontSize+"px";
}
// 初始化
setRem();
// 改變窗口大小時重新設置 rem
window.onresize = function () {setRem();
};在實際開發中，echarts組件也需要根據實際進行字體轉換，在utils.js文件中創建方法
export function fontSize(res) {let clientWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;if (!clientWidth) return;// 此處的1920 為設計稿的寬度，記得修改！let fontSize = clientWidth / 1920;return res * fontSize;
}
使用，例如：
import {fontSize} from "@/utils/index.js"legend: {itemWidth: 6,itemGap: 20,x: "left",y: "top",textStyle: {fontSize: fontSize(14),color: "#666666",},},
