前端屏幕尺寸适配拿走即用附加详细注释

置顶 Sing前端-悟空

已于 2023-03-02 10:04:16 修改

阅读量2.4k

点赞数 1

文章标签： javascript

于 2022-03-18 10:10:12 首次发布

本文链接：https://blog.csdn.net/xiaoleiv9/article/details/123567460

版权

rem适配方案无注释版本

// H5页面的rem适配计算 自调用函数
(function(doc, win, baseW) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
  // 设置data-dpr属性，留作的css hack之用
  var dpr = ( window.devicePixelRatio * 1 ).toFixed(2) || 1;
  dpr = dpr == Math.ceil(dpr) ? Math.ceil(dpr) : dpr;
  docEl.setAttribute('data-dpr', dpr);

  var recalc = function(){
    var clientWidth = docEl.clientWidth;
    if(!clientWidth) return;
    clientWidth = clientWidth >= baseW ? baseW : clientWidth;
    docEl.style.fontSize = 100 * ( clientWidth / baseW) + 'px';
  };
  if (!doc.addEventListener) return;
  recalc()
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window, 750);

带有详细注释版本

// 打上注释的rem适配计算
(function(doc, win, baseW) {
  var docEl = doc.documentElement, // 返回一个页面的根节点元素(当前页面的html标签)
    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", // 获取移动端屏幕是否翻转（手机重力感应等引起屏幕长宽变化之类的）
    isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
      navigator.userAgent
    ); // 设置data-dpr属性，留作的css hack之用

  var dpr = (window.devicePixelRatio * 1).toFixed(2) || 1;
  dpr = dpr == Math.ceil(dpr) ? Math.ceil(dpr) : dpr;
  docEl.setAttribute("data-dpr", dpr);

  var recalc = function() {
    var clientWidth = docEl.clientWidth; // 获取当前页面的实际宽度
    if (!clientWidth) return;
    // 设置当前页面宽度 如果大于或等于1920尺寸 宽度则为1920去计算 // 小于1920尺寸则按照当前页面宽度计算
    clientWidth = clientWidth >= baseW ? baseW : clientWidth;
    // 计算得出 当前屏幕下的根节点元素的html像素单位  24是1rem=24px  方便计算的情况下可以书写50 1rem=50px
    if (24 * (clientWidth / baseW) < 16) {
      docEl.style.fontSize = 16 + "px"; // 根节点fontSize最小16px
    } else {
      docEl.style.fontSize = 24 * (clientWidth / baseW) + "px"; // 当前根节点font-size的大小
      //  ;
    }
  };

  if (!doc.addEventListener) return;

  // 第一个参数：添加事件 第二个参数：触发事件所执行的函数 第三个参数：可选 布尔值 指定事件是否在捕获或冒泡阶段执行
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window, 1920);

这里推荐一个px自动提供转rem的扩展工具：px2rem

另外一种适配方案媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 
      rem布局的适配过程:
        1、需要把px单位转换成rem单位
          px = rem * html标签的font-size
          ——》rem = px / html标签的font-size
                  = px / 会根据当前屏幕的大小，自定义一个html标签的font-size   50px
                  = 400 / 50
                  = 8rem

        2、配合媒体查询设置不同屏幕下的html标签的font-size (等比例缩放)

          比例 = 当前屏幕宽度 / 当前html标签的font-size
              = 750 / 50
              = 15

          当前html标签的font-size = 当前屏幕宽度 / 比例
                                = 640 / 15
    
     */

    div {
      width: 8rem;
      height: 8rem;
      background-color: pink;
    }

    /* 适配375px屏幕下的font-size */
    @media screen and (min-width:375px) {
      html {
        /* font-size: (375px/15); */
        font-size: 25px;
      }
    }

    /* 适配640px屏幕下的font-size */
    @media screen and (min-width:640px) {
      html {
        /* font-size: ????; */
        /* font-size: (640px/15); */
        font-size: 42.66px;
      }
    }

    /* 适配750px屏幕下的font-size */
    @media screen and (min-width:750px) {
      html {
        font-size: 50px;
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>