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

最新推荐文章于 2022-07-26 09:56:22 发布

weixin_43756060

最新推荐文章于 2022-07-26 09:56:22 发布

阅读量544

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43756060/article/details/88597147

vue阅读项目记录与总结专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在index.html中添加meta标签以实现响应式设计，确保网站在不同设备上显示效果一致。同时，通过在App.vue文件中动态调整rem单位，使文字大小随屏幕尺寸变化，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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>