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

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>

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值