Vant 中的樣式默認使用 px 作為單位，如果需要使用 rem 單位，推薦使用以下兩個工具：

postcss-pxtorem 是一款 postcss 插件，用于將 px 單位轉化為 rem

lib-flexible 用于設置 rem 基準值

1.安裝依賴

yarn add amfe-flexible 或者使用 npm i amfe-flexible

? ?復制區：?yarn add amfe-flexible? ? ? ? ? ? ? ? ? ? ? ? ? ? ?npm i amfe-flexible

然后在 main.js 中加載執行該模塊：

import 'amfe-flexible'

?復制區：?import 'amfe-flexible'

2.安裝postcss-pxtorem依賴：

yarn add -D postcss-pxtorem 或者是 npm install postcss-pxtorem -D 這里解釋一下：# -D 是 --save-dev 的簡寫 把依賴包的版本信息寫進 package.json 文件里面

?復制區：?yarn add -D postcss-pxtorem? ? ? ? ?npm install postcss-pxtorem -D

然后在項目根目錄中創建 postcss.config.js 文件：

/*? ? ?這個postcss.config.js 是與public文件夾同級的！? ? */

module.exports = {plugins: {// postcss-pxtorem 插件的版本需要 >= 5.0.0'postcss-pxtorem': {rootValue({ file }) { // 判斷是否是vant的文件 如果是就使用 37.5為根節點字體大小// 否則使用75 因為vant使用的設計標準為375 但是市場現在的主流設置尺寸是750return file.indexOf('vant') !== -1 ? 37.5 : 75;},// 配置哪些文件中的尺寸需要轉化為rem *表示所有的都要轉化propList: ['*'],},}, }; 這個文件會被自執行

?復制區：?

module.exports = {
? ? plugins: {
? ? ? ? // postcss-pxtorem 插件的版本需要 >= 5.0.0
? ? ? ? 'postcss-pxtorem': {
? ? ? ? ? ? rootValue({ file }) { // 判斷是否是vant的文件 如果是就使用 37.5為根節點字體大小
? ? ? ? ? ? ? ? // 否則使用75 因為vant使用的設計標準為375 但是市場現在的主流設置尺寸是750
? ? ? ? ? ? ? ? return file.indexOf('vant') !== -1 ? 37.5 : 75;
? ? ? ? ? ? },
? ? ? ? ? ? // 配置哪些文件中的尺寸需要轉化為rem *表示所有的都要轉化
? ? ? ? ? ? propList: ['*'],
? ? ? ? },
? ? },
};
這個文件會被自執行

總結

以上是生活随笔為你收集整理的vue3+vant移动端适配 px转换rem的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。