一、配置與安裝步驟：

?

1、在 Vue 項目的 src 文件夾下創建一個 config 文件夾：

?

2、在 config 文件夾中創建 rem.js：

?

3、將以下代碼復制到 rem.js 中：

?

// 基準大小 const baseSize = 32 // 設置 rem 函數 function setRem () {// 當前頁面寬度相對于 750 寬的縮放比例，可根據自己需要修改。const scale = document.documentElement.clientWidth / 750// 設置頁面根節點字體大小document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } // 初始化 setRem() // 改變窗口大小時重新設置 rem window.onresize = function () {setRem() }

?

?

4、在 src 文件夾下的 main.js 中引入：

import './config/rem'

?

5、在 Vue 項目根目錄終端引入：

npm install postcss-pxtorem -D

?

6、在 Vue 項目文件夾下的?postcss.config.js 中加入：

module.exports = {plugins: {autoprefixer: {},"postcss-pxtorem": {"rootValue": 16,"propList": ["*"]}} }

至此，Vue 項目就能實現在頁面中自動將 px 轉換成? rem 了

?

二、實例演示：

假如給出設計圖是 375*812，可以在代碼中直接寫入：

div{width: 375px;height: 812px; }

此時在頁面中顯示：

如果要讓部分屬性不轉換成 rem，可以將 px 寫成 Px：

div{width: 375Px;height: 812px; }

這時在頁面中就會保留 375px 了：

?

轉載于:https://www.cnblogs.com/Leophen/p/11283677.html

總結

以上是生活随笔為你收集整理的Vue项目中自动将px转换为rem的全部內容，希望文章能夠幫你解決所遇到的問題。

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