移动端适配

最新推荐文章于 2025-05-09 18:39:49 发布

翟敏1201

最新推荐文章于 2025-05-09 18:39:49 发布

阅读量148

点赞数

CC 4.0 BY-SA版权

分类专栏：前端常用知识

本文链接：https://blog.youkuaiyun.com/chaitong2204/article/details/97938238

前端常用知识专栏收录该内容

18 篇文章

订阅专栏

移动端适配的方法有很多中，今天我介绍一种比较简单的适配方法。通过获取手机宽度来设置根元素，再通过rem进行适配，具体方法请看代码。超级简单

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>shopdemo</title>
    <style>
      /* 以iphone5手机为基础 width=320px 1rem = 16px */
      .container {
        width: 20rem;
        height: 10rem;
        background: bisque;
      }
      .context {
        color: red;
        font-size: 1rem;
      }

    </style>
  </head>
  <body>
    <div id="app"></div>
    <div class="container">
      <p class="context">移动端适配</p>
    </div>
    <!-- built files will be auto injected -->
    <script>
      // 获取手机屏幕的宽度
      let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;
      let htmlDom = document.getElementsByTagName('html')[0];
      if (htmlwidth>750) {
        htmlwidth = 750
      }
      // 320/20 = 16px
      htmlDom.style.fontSize = htmlwidth/20 + 'px';
    </script>
  </body>
</html>