viewport配置和rem设置--（五）

2024-04-01 11:30:46

在index.html文件中添加meta标签

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" name="viewport">

在App.vue文件中引入rem
在dom元素渲染完成之后，获取html元素

<script>
  export default {}
  document.addEventListener('DOMContentLoaded', () => {
  	const html = document.querySelector('html')
  	//文字的大小为屏幕尺寸除以十，比如屏幕尺寸为800，字体大小为80，即1rem=80px
    let fontSize = window.innerWidth / 10
    //给字体大小设置上限，防止字体过大
    fontSize = fontSize > 50 ? 50 : fontSize
    html.style.fontSize = fontSize + 'px'
  })
</script>