vue中用rem自适应
2018-11-14 本文已影响0人
四哥_d0ad
1.在 的App.vue中写如下代码:
<template>
<div id="app">
<Header></Header>
<router-view></router-view>
</div>
</template>
<script>
import Header from '@/components/Header.vue'
export default {
//注册组件
components: {
Header,
},
created(){
this.resetWidth()
},
methods:{
resetWidth(){
let baseWidth = document.documentElement.clientWidth||document.body.clientWidth;
document.documentElement.style.fontSize=baseWidth*100/375 +"px";
console.log(baseWidth);
}
}
};
</script>
<style>
</style>
2.在index.html文件中:
html{font-size: 100px;}
body{font-size: 16px;}
