大屏适配(采用rem 和百分比)

最新推荐文章于 2024-08-27 15:08:39 发布

小兔子的博客

最新推荐文章于 2024-08-27 15:08:39 发布

阅读量357

点赞数

分类专栏： vue 文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_52484354/article/details/127427701

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用JavaScript动态调整HTML页面的字体大小和宽高，以实现16:9的屏幕适配。通过计算比例，确保在不同设备上提供良好的用户体验。

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

<script>
  const clientWidth = document.documentElement.clientWidth
  const clientHeight = document.documentElement.clientHeight
  window.pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidth
  const pageHeight = pageWidth / (16 / 9)
  const string = `<style>html{
      font-size: ${pageWidth / 100}px
    }</style>`
  document.write(string)
 
  root.style.width = pageWidth + 'px'
  root.style.height = pageHeight + 'px'
  root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'
</script>