Vue-cli3.0 px轉換為rem,完成h5自適應

設計稿對於前端來說是非常重要的,但是設計稿的單位是px,而h5的適配單位現在用得最多的是rem,百度了下都是比較老舊的實現方法,要麼自己去計算rem值,要麼依靠編輯器安裝插件轉換,接著我便查了一些資料,然後在這裡記錄下

技術棧

• vue-cli 3.0: 使用腳手架工具創建項目
• postcss-pxtorem: 轉換px為rem的插件

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

因為rem單位是相對於根節點的字體大小的，所以通過設置根節點的字體大小可以動態的改變rem的大小, html的font-size===1rem,網上有很多關於rem的介紹,這裡就不記錄了

1、創建 rem.js 文件

# 基準大小
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()
}
複製代碼

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

# main.js
import './utils/rem'
複製代碼

引入文件後可查看下html是否添加了font-size屬性或者font-size被動態的改變了,以此來確定是否引入成功, 其實到這裡基本上完成了rem佈局了, h5會動態的去自適應,不過這樣子在實際開發中還是要去計算px等於多少rem,接下來我們使用 postcss-pxtorem 自動轉換px為對應的rem值

使用 postcss-pxtorem 將px轉換為對應的rem值

先安裝依賴包 postcss-pxtorem

npm install postcss-pxtorem --save-dev
複製代碼

接下來配置 postcss-pxtorem

# vue.config.js
module.exports = {
 lintOnSave: true,
 css: {
 loaderOptions: {
 postcss: {
 plugins: [
 require('postcss-pxtorem')({
 rootValue : 16, // 換算的基數
 selectorBlackList : [], // 忽略轉換正則匹配項
 propList : ['*'],
 }),
 ]
 }
 }
 }
}
複製代碼

經過上面一通噼裡啪啦的搗鼓後, 沒出什麼報錯的話,便可用 px 作為單位開發

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

body {
	width: 750px;
	height: 1136px;
}
# 將被轉換為
body {
	widht: 23.4375rem;
	height: 35.5rem;
}

關鍵字: font-size 複製代碼 (