VUE是方便快捷前端開發(fā)的一種開源JS框架，它使用細(xì)粒度組件化的代碼架構(gòu)和簡(jiǎn)單的API接口來(lái)構(gòu)建交互復(fù)雜的高性能應(yīng)用程序。當(dāng)然VUE框架也提供了很多輔助工具和技術(shù)，其中REM是其中一種。

REM是指相對(duì)于根元素（即html元素）font-size來(lái)設(shè)置元素大小的一種CSS單位。這種單位使用過(guò)程中非常靈活，而且非常方便。尤其在響應(yīng)式布局策略上，使用REM可以避免不同的屏幕尺寸帶來(lái)的排版問題。VUE中使用REM的方法非常簡(jiǎn)單，只需要在主入口文件（main.js）中引用'lib-flexible'庫(kù)并調(diào)用此庫(kù)的initRem函數(shù)即可：

import 'lib-flexible'

import { initRem } from 'lib-flexible'
// 根據(jù)設(shè)計(jì)圖大小來(lái)決定HTML的font-size大小，默認(rèn)為10
initRem(750)

使用了REM原始的計(jì)算公式是：元素大小 / 指定字體大小 = 元素大小使用REM單位的值，但是在實(shí)際應(yīng)用中還需要考慮設(shè)備像素比，例如1rem在不同設(shè)備上所代表的大小。'lib-flexible'庫(kù)正是根據(jù)當(dāng)前設(shè)備像素比（devicePixelRatio）進(jìn)行計(jì)算，并將計(jì)算結(jié)果儲(chǔ)存在'data-dpr'屬性里。

另外一點(diǎn)需要注意的是，在使用REM時(shí)還需要考慮VUE框架的路由系統(tǒng)，因?yàn)槁酚蓪?dǎo)航時(shí)可能會(huì)造成頁(yè)面內(nèi)容消失并不會(huì)再次渲染，此時(shí)可以在路由跳轉(zhuǎn)之前通過(guò)一個(gè)Hack策略重新觸發(fā)'data-dpr'屬性的計(jì)算方法，并將計(jì)算結(jié)果映射到HTML元素的font-size屬性上，從而保證路由導(dǎo)航下的REM布局問題得到完美解決：

window.addEventListener('hashchange', () =>{
const html = document.getElementsByTagName('html')[0]
const { dpr, rem } = html.dataset
html.removeAttribute('data-dpr')
html.style.fontSize = rem
initRem(750)
})