px2rem的食用方法

2021-09-12 01:48:42 字數 817 閱讀 4408

安裝

npm install px2rem-loader
找到build資料夾裡的utils.js這個檔案 在cssloader 後面加入

var px2remloader =


}再然後把這行替換成


const loaders = options.usepostcss ?


[cssloader, postcssloader]


:[cssloader]


這個 const loaders = options.usepostcss ?


[cssloader, postcssloader]


:[cssloader, px2remloader]
注意： 這裡的流程中有兩次轉換第一次 css中的px轉換為px2rem的rem，這裡是 40px = 1rem，第二步是rem適配到頁面 ，這裡的rem與畫素比是根據螢幕寬度動態計算的，以375的裝置為例是 1rem = 20px轉換到頁面中顯示.這樣最終實現 輸入 40px，螢幕上20px的效果，因為我ui標註是按照2倍圖來的，所以直接按照標註寫就自己轉換了。

在 src 目錄下建立個名為 rem.js 的檔案 把**輸入進去

(


function()


a();


window.onresize = a})


();
找到 src 目錄裡的 main.js 引入剛剛建立的 rem.js 檔案

重啟就可以了

部分摘自：情有千千節

rem與px的轉換

2019獨角獸企業重金招聘python工程師標準 rem是相對於根元素，這樣就意味著，我們只需要在根元素確定乙個參考值，這個參考值設定為多少，完全可以根據您自己的需求來定。我們知道，瀏覽器預設的字型大小16px，來看一些px單位與rem之間的轉換關係 px rem 12 12 16 75 14 14...

rem與px的轉換

1.em是相對於元素的的父元素的font size進行計算。缺點 當父元素多層使用font size時，可能會帶來無法預知的錯誤。2.rem是相對於根元素html的font size進行計算。rem和em的區別說完後，就介紹rem和px之間的轉換吧。帶著愉快的心情去了解吧，歐耶 px和rem之間的轉...

rem與px的關係

rem是相對於根元素 html 的，我們只需要在根元素上設定乙個參考的值，這個參考值根據自己的需求來定。如 瀏覽器的預設的font size 16px 它的px和rem之間的轉換如下表所示 pxrem 12px 12 16 0.75 rem 14px 14 16 0.875 rem 16px 16 ...