一、配置與安裝步驟：

?

1、在 Vue 項(xiàng)目的 src 文件夾下創(chuàng)建一個(gè) config 文件夾：

?

2、在 config 文件夾中創(chuàng)建 rem.js：

?

3、將以下代碼復(fù)制到 rem.js 中：

?

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

?

?

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

import './config/rem'

?

5、在 Vue 項(xiàng)目根目錄終端引入：

npm install postcss-pxtorem -D

?

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

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

至此，Vue 項(xiàng)目就能實(shí)現(xiàn)在頁面中自動(dòng)將 px 轉(zhuǎn)換成? rem 了

?

二、實(shí)例演示：

假如給出設(shè)計(jì)圖是 375*812，可以在代碼中直接寫入：

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

此時(shí)在頁面中顯示：

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

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

這時(shí)在頁面中就會(huì)保留 375px 了：

?

轉(zhuǎn)載于:https://www.cnblogs.com/Leophen/p/11283677.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。