移动端rem适配方案

最新推荐文章于 2024-05-30 15:07:12 发布

扶苏1002

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量353

点赞数 1

分类专栏：移动端兼容文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_44741577/article/details/136055615

版权

移动端兼容专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、rem是什么
二、应用场景
三、如何进行rem适配
四、PC端处理
五、封装一个phone.js文件

一、rem是什么

rem（font size of the root element）是指相对于根元素html的字体大小的单位。

例如： 如果html的font-size是16px那么1rem = 16px

二、应用场景

多应用于移动端H5的适配（不同机型不同设备宽度）

三、如何进行rem适配

3.1、添加meta应对移动端适配

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 添加meta标签进行移动端适配（让html的宽度正好等于设备的宽度） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>移动端适配</title>
  </head>

3.2、动态获取当前设备宽度

<body>
    <script>
      // 定义一个函数获取当前设备的宽度
      function getWinSize() {
        let width = document.documentElement.clientWidth;
        console.log(width);
      }
      //进入页面默认获取一次
      getWinSize();
      //当页面窗口视图改变的时候再次执行，获取设备宽度
      window.onresize = getWinSize;
    </script>
  </body>

3.3、根据设备宽度，设置html的font-size

假设设计稿宽度是750px，我们获取到的设备宽度为clientWidth
那么有等式一：750px = clientWidth
那么有等式二：1px = clientWidth/750

假设我们想实现 1rem = 100px（方便计算，也可以是其他比例）
也就是需要设置html的font-size为100px
根据等式二，得出1rem = 100px = 100*(clientWidth/750)

最后给html的根元素设置字体大小值就为100*(clientWidth/750)

注意

这里的 1rem = 100px，好处是：
只需要根据设计稿给的px直接缩小100倍，改单位为rem即可

<script>
  // 定义一个函数获取当前设备的宽度
  function getWinSize() {
    let width = document.documentElement.clientWidth;
    // 假设设计稿宽度为750px
    // 假设已知根元素我们设置为100px（这里设置100方便后续我们好计算）
    // 动态设置根元素html的fontSize
    document.documentElement.style.fontSize =
      100 * (width / 750) + "px";
  }
  //进入页面默认获取一次
  getWinSize();
  //当页面窗口视图改变的时候再次执行
  window.onresize = getWinSize;
</script>

3.4、如何使用？

如果设计稿给我们一个盒子宽是 350px 高是 400px，那么我们只要在数值的基础上缩小 100倍即可，宽是 3.5rem高是 4rem

四、PC端处理

当我们做的移动端适配以后，这个网页仍然有可能在PC端打开，这时候我们就需要对body元素设置最大宽度和居中，来适配pc端

body {
   /* 750根据设计稿宽度设计 */
   max-width: 750px;
   /* 居中 */
   margin: 0 auto;
}

五、封装一个phone.js文件

代码如下

(function (doc, win) {
  var docEL = document.documentElement,
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
    recalc = function () {
      // 获取当前设备的宽度
      var clientWidth = docEL.clientWidth;
      if (!clientWidth) return;
      if (clientWidth >= 750) {
        //宽度大于750，根元素字体大小不能超过100px（不能大于设计稿的最大宽度）
        docEL.style.fontSize = "100px"; //设置根元素大小
      } else {
        docEL.style.fontSize = (clientWidth / 750) * 100 + "px";
      }
    };
  if (!doc.addEventListener) return;
  //添加窗口变动监听
  win.addEventListener(resizeEvt, recalc, false);
  //dom加载的时候执行一次
  doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

引入

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 添加meta标签进行移动端适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./phone.js"></script>

扶苏1002

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端rem适配方案

当我们做的移动端适配以后，这个网页仍然有可能在。元素设置最大宽度和居中，来适配pc端。，那么我们只要在数值的基础上缩小。的适配（不同机型不同设备宽度）的根元素设置字体大小值就为。如果设计稿给我们一个盒子。打开，这时候我们就需要对。
复制链接

扫一扫