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的介紹,這裏就不記錄了

一、建立 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()
}
複製代碼

一、在 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;
}
複製代碼