响应式布局rem使用

配置文件:

//shiy.js
window.onload = ()=>{
	res()
}

window.onresize = () => {
	// 调用函数进行获取html根字体的大小
	res()
}

let res = () => {
	// 当前代码是获取可视窗口的宽度 除以16 16是默认字体大小
	let width = document.documentElement.clientWidth / 16;
	// 设置html根字体大小
	document.getElementsByTagName('html')[0].style.fontSize = width + 'px';
	// 获取html根字体大小
	console.log(document.getElementsByTagName('html')[0].style.fontSize)
}

main.js

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import mixin from './components/mixin.js'
import './shiy.js'

HomeView.vue

<style>
	.title{
		font-size: 1.5rem;
	}
	.head{
		font-size: 2rem;
		text-align: center;
		background-color: aquamarine;
		height: 5rem;
	}
</style>