vue项目设置rem

首先在App.vue中设置：

<script>
export default {}
document.addEventListener('DOMContentLoaded', () => {
  const html = document.querySelector('html')
  let fontSize = window.innerWidth / 10
  fontSize = fontSize > 50 ? 50 : fontSize
  html.style.fontSize = fontSize + 'px'
})
</script>

因为项目使用了scss预处理器，所以我们在global.scss中设置px2rem变量：

$ratio: 375 / 10;
@function px2rem($px){
	@return $px / $ratio + rem;
}

接着我们在main.js中引用global.scss，然后我们就可以在所有的文件中使用px2rem。

.text {
  font-size: px2rem(20);
  color: orange;
}