vue px轉換爲rem

前端開發中還原設計圖的重要性毋庸置疑，目前來講應用最多的應該也仍是使用rem。然而不少人依然仍是處於刀耕火種的時代，要麼本身去計算rem值，要麼依靠編輯器安裝插件轉換。

而本文的目標就是經過一系列的配置後，在開發中能夠直接使用設計圖的尺寸開發，項目爲咱們自動編譯，轉換成rem。

技術棧

• vue-cli：使用腳手架工具建立項目。
• postcss-pxtorem：轉換px爲rem的插件。

自動設置根節點html的font-size

由於rem單位是相對於根節點的字體大小的，因此經過設置根節點的字體大小能夠動態的改變rem的大小。

原理網上有不少文章分享，這裏不具體解釋。

一、建立rem.js文件

不少人寫這種小工具文件會習慣性的加上閉包，這個實際上是沒有必要的。ES6中每一個文件都是單獨的一個模塊。

// 基準大小
const baseSize = 32
// 設置 rem 函數
function setRem () { // 當前頁面寬度相對於 750 寬的縮放比例，可根據本身須要修改。 const scale = document.documentElement.clientWidth / 750 // 設置頁面根節點字體大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } // 初始化 setRem() // 改變窗口大小時從新設置 rem window.onresize = function () { setRem() } 

二、在main.js中引入rem.js

import './utils/rem' 

引入文件後，查看頁面的html節點，是否有被自動添加 font-size。

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

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

配置 postcss-pxtorem 自動轉換px爲rem

一、安裝 postcss-pxtorem

$ npm install postcss-pxtorem -D

二、修改根目錄 .postcssrc.js 文件

找到 plugins 屬性新增pxtorem的設置

"postcss-pxtorem": { "rootValue": 32, "propList": ["*"] } 

按照上述配置項目後，便可在開發中直接使用 px 單位開發。

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

body {
	width: 750px;
	height: 1136px;
}

將被轉換爲

body {
	widht: 23.4375rem;
	height: 35.5rem;
}

注意：此方法支持import 和 .vue單文件中style。暫不支持style中使用@import url();

 

轉載自：

大灰狼的小綿羊哥哥的博客

原文連接：https://blog.csdn.net/sinat_17775997/article/details/79230616