vue專案中將px轉為rem

2021-09-28 15:54:35 字數 604 閱讀 7792

之前在寫專案的時候,封裝了乙個css,用來將px轉rem,後來發現這樣寫還不是很友好,那麼有沒有一種方法是將我寫的px專案執行後自動轉為rem的呢,答案肯定是當然有了。

1.設定根節點的font-size

// 基準大小

const basesize = 32

// 設定 rem 函式

function setrem()

// 初始化

setrem()

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

window.onresize = function ()

我將此css放置的位置如下圖所示:

2.在main.js中引入rem.js

import './config/utils/rem'
3.在vue.config中配置

css: ),]}

}},

此時開啟瀏覽器發現已經將px全部轉為rem啦。

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中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...