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

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

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