Vue專案自動轉換 px 為 rem

前端開發中還原設計圖的重要性毋庸置疑，目前來說應用最多的應該也還是使用rem。然而很多人依然還是處於刀耕火種的時代，要麼自己去計算rem值，要麼依靠編輯器安裝外掛程式轉換。

而本文的目標就是通過一系列的配置後，在開發中可以直接使用設計圖的尺寸開發，專案為我們自動編譯，轉換成rem。

因為rem單位是相對於根節點的字型大小的，所以通過設定根節點的字型大小可以動態的改變rem的大小。

原理網上有很多文章分享，這裡不具體解釋。

很多人寫這種小工具檔案會習慣性的加上閉包，這個其實是沒有必要的。es6中每個檔案都是單獨的乙個模組。

// 基準大小

const basesize = 32
// 設定 rem 函式
function
setrem
() // 初始化
setrem()
// 改變視窗大小時重新設定 rem
window.onresize = function
()

import './utils/rem'

注意：完成到這一步，也就是實現了rem布局，實際開發的時候，還是需要我們去計算對應的rem值去開發。

下一步我們就配置一下webpack，自動轉換px為對應的rem值。

1、安裝postcss-pxtorem

$ npm install postcss-pxtorem -d

找到postcssloader的**塊

const postcssloader = 

}

const postcssloader = )

]}}

例如設計給出的設計圖是 750 * 1136，那麼可以直接在頁面中寫

body

body

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，實現自適應

1 安裝依賴，終端執行 npm install postcss pxtorem s e npm i postcss pxtorem 5.1.1 安裝5.1.1版本 推薦使用5.1.1版本，其他版本容易不相容出現下圖錯誤 2 建立utils資料夾，並建立rem.js檔案 檔案 export funct...

vue中px自動轉rem

vue cli3.0 rem 使用。首先安裝amfe flexible外掛程式，在main.js裡引入 1 npm i amfe flexible s 2 再main.js中import amfe flexible 然後再，安裝postcss px2rem外掛程式 npm i postcss px2...