設計稿對於前端來說是非常重要的,但是設計稿的單位是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;
}
