隨著移動設備的普及，網頁的適配問題也越來越重要。在過去的解決方案中，我們通常會使用百分比和媒體查詢來實現頁面的適配。但這種方案需要我們手動調整布局，并且不夠靈活。而rem適配方案則可以輕松地實現頁面的自適應，為我們的工作帶來了極大的便利。

/*設置html根元素字體大小*/
function setRem(){
let screenWidth = document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth;
let uiWidth = 750; // 假設UI圖為750
let scale = screenWidth / uiWidth;
let fontSize = scale * 100; // 字體大小為100px
document.documentElement.style.fontSize = fontSize + 'px';
}
window.onresize = function(){
setRem();
}
setRem(); // 頁面加載后先設置一次rem

在使用rem適配方案時，我們需要根據設計師提供的UI圖確定一個基準像素值。通常情況下，我們會將UI圖的寬度設定為750px，將字體大小設定為100px，然后根據設備的屏幕大小動態地調整html根元素的字體大小。

在Vue中，我們可以將上述代碼放在main.js中，并使用Vue的生命周期函數來觸發其執行。

// main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
beforeCreate () { // 生命周期：Vue實例初始化之后，創建之前
function setRem(){
let screenWidth = document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth;
let uiWidth = 750; // 假設UI圖為750
let scale = screenWidth / uiWidth;
let fontSize = scale * 100; // 字體大小為100px
document.documentElement.style.fontSize = fontSize + 'px';
}
window.onresize = function(){
setRem();
}
setRem();
},
render: h =>h(App),
}).$mount('#app')

通過將代碼放在beforeCreate生命周期函數中，我們可以確保頁面的rem適配在Vue實例創建之前完成，避免出現UI樣式錯亂的情況。