Vue移动端的适配

Vue移动端的适配

一、通过原生js设置html的font-size属性

1. 创建公共js文件(global.js)

function setHtmlFontSize() {
    const screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
    document.getElementsByTagName('html')[0].style.fontSize = screenWidth*2/10+'px';
}
//事件监听触发
function setFontSize() {
    window.onresize = function () {
        setHtmlFontSize();
    }
}
//将方法暴露
module.exports = {
    setFontSize,
    setHtmlFontSize
}

2. 在App.vue组件(App.vue)

//引入js
import {setFontSize, setHtmlFontSize} from './assets/js/global';

export default {
    name: 'app',
    computed: mapGetters(['loading','shownav']),//使用对象展开运算符将 getter 混入 computed 对象中，其中loading和shownav属性
    //监听路由的变化
    watch:{
        //$route路由信息对象
        $route(to,from){
            
        }
    },
    components:{
        //组件
    },
    mounted(){//生命周期钩子：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子
        setHtmlFontSize();
        setFontSize();
    }
}

 二、通过lib-flexible插件

1. 安装lib-flexble插件

npm install lib-flexible --save

2. 在项目的入口文件main.js引入lib-flexible