实战: 移动端,如何做适配?

最新推荐文章于 2024-10-06 13:30:57 发布

快乐的豆角

最新推荐文章于 2024-10-06 13:30:57 发布

阅读量103

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_55643962/article/details/142528223

版权

在html.index文件中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=yes" />
    <title>圆和医疗</title>
  </head>
  <body>
    <div id="app" style="font-size: 16rem"></div>
    <script>
      function setRem() {
        const baseWidth = 375 // 设计稿宽度
        const clientWidth = document.documentElement.clientWidth //获取当前浏览器窗口的宽度
        document.documentElement.style.fontSize = (clientWidth / baseWidth) * 1 + "px" //计算根元素的字体大小。通过将当前窗口宽度 clientWidth 除以 baseWidth，得到一个比例，然后乘以 1（可以理解为不缩放），最后将结果赋值给根元素的 fontSize 属性。这样，根元素的字体大小会根据窗口的宽度动态调整。
      }
      window.onload = setRem //页面加载完成时调用 setRem 函数
      window.onresize = setRem //窗口大小改变时调用 setRem 函数
    </script>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>