Vue專案將px自動轉換為rem,實現自適應

2022-09-09 13:45:28 字數 775 閱讀 5866

1、安裝依賴,終端執行

npm install postcss-pxtorem --s**e 

npm i [email protected] //安裝5.1.1版本

推薦使用5.1.1版本,其他版本容易不相容出現下圖錯誤

2、建立utils資料夾,並建立rem.js檔案

檔案

export function setrem ()

//初始化

setrem()

// 改變視窗大小時重新設定 rem

window.addeventlistener('resize', setrem, false)

3、在manin.js引入

import './utils/rem'

4、配置vue.config.js檔案,如果專案沒有vue.config.js檔案,直接在專案根目錄下建立即可

檔案

module.exports =)]}

}},}

5、效果

自動轉換前

自動轉換後

Vue專案中自動將px轉換為rem

基準大小 const basesize 32 設定 rem 函式 function setrem 初始化 setrem 改變視窗大小時重新設定 rem window.onresize function import config rem npm install postcss pxtorem dmo...

Vue專案自動轉換 px 為 rem

前端開發中還原設計圖的重要性毋庸置疑,目前來說應用最多的應該也還是使用rem。然而很多人依然還是處於刀耕火種的時代,要麼自己去計算rem值,要麼依靠編輯器安裝外掛程式轉換。而本文的目標就是通過一系列的配置後,在開發中可以直接使用設計圖的尺寸開發,專案為我們自動編譯,轉換成rem。因為rem單位是相對...

vue cli 4 x 自動把px轉換為rem

移動端 npm i lib flexible postcss px2rem s 1 在根目錄新增postcss.config.js檔案 module.exports postcss px2rem 2 在main.js新增 import lib flexible flexible pc端npm i p...