前端屏幕适配

屏幕适配

我们以当前屏幕宽度除以原稿图宽度然后在乘以100，那么1rem=100px。

当你的原稿是750px，换算单位 1rem = 75px

原稿1125px ，换算单位 1rem = 112.5px

H5屏幕适配

//auto-size.js
(function (win, doc) {
    // 核心代码
    function setFontSize() {
        // 获取window 宽度
        var winWidth = window.innerWidth;
        // 750 是当前 UI 设计图的宽度  ,如果原稿是1200，下面就改成1200
        doc.documentElement.style.fontSize = (winWidth / 750) * 100 + 'px';
        // console.log( doc.documentElement.style.fontSize);
    }
    // 下列代码用于优化移动设备上的字体大小，以确保在旋转设备或调整窗口大小时能够适应不同的屏幕尺寸。
    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';

    var timer = null;

    win.addEventListener(evt, function () {
        clearTimeout(timer);

        timer = setTimeout(setFontSize, 300);
    }, false);

    win.addEventListener("pageshow", function (e) {
        if (e.persisted) {
            clearTimeout(timer);

            timer = setTimeout(setFontSize, 300);
        }
    }, false);

    //初始化
    setFontSize();

})(window, document);

大屏适配

我们以当前屏幕宽度除以24，那么1rem=原稿图宽度除以24。

当你的原稿是1920px，换算单位 1rem = 1920/24=80px;

也可以除以原稿图宽度在乘以100

//flexible.js
(function flexible(window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  // 把屏幕平均分成10等份。比如1920/10= 192 px,这个时候1rem就是192px,配合vscod插件快速适配，在style中使用媒体查询。
    //pc端一般为24
  function setRemUnit() {
    var rem = docEl.clientWidth / 24
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

参考文章:flexible.js的使用和flex屏幕的适配方案