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