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 --save2. 在项目的入口文件main.js引入lib-flexible