Vue移动端Rem适配方案(适配Vant UI库)

// 基准大小

const baseSize = 32;

const designDraft = 750;

// 设置 rem 函数

function setRem () {

    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。

    const scale = document.documentElement.clientWidth / designDraft;

    // 设置页面根节点字体大小

    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'

}

// 初始化

setRem();

// 改变窗口大小时重新设置 rem

window.onresize = function () {

    setRem()

};

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import "./utils/rem.ts";

Vue.config.productionTip = false

import Vant from 'vant';

import 'vant/lib/index.css';

Vue.use(Vant);

new Vue({

    router,

    store,

    render: h => h(App)

}).$mount('#app')