设置根节点font-size实现rem适配移动端设备

适配前先搞清楚几个像素的概念
        像素概念:
        1)物理像素:显示器上最小的物理显示单位
        2)设备独立像素(也叫逻辑像素):虚拟概念,一个可以由程序使用的最小虚拟像素点(css像素)
        3)设备像素比:也叫dpr,可以通过window.devicePixelRatio获取。
          设备像素比 = 物理像素 / 设备独立像素


        以iphone6来说,
        物理像素分辨率: 750 * 1334     (值越大屏幕越清晰)
        设备独立像素分辨率 : 375 * 667  (值越大手机屏幕越大,与屏幕直观尺寸有关)
        设备像素比: 2


适配原则:对移动端320-768进行适配,超过768采用768原则.小于320采用320原则。

当设备宽度>768(iPad尺寸),根节点统一使用102.4px
当设备宽度<320(一般手机最小尺寸),根节点统一使用42.7px

(function(d){
  const html = d.getElementsByTagName('html')[0];  // html节点
  let resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
  function getScale() {
    let width = html.clientWidth, // 设备宽度
        dpr = window.devicePixelRatio, // 像素比
        scale = Number(width/750).toFixed(4),  //  320:0.427   768:1.024
        lastScale = scale>1.024?1.024:(scale<0.427?0.427:scale);
    return lastScale;
  }
  let changePage = function(e) {
    let lastScale = getScale();
    if ( html.clientWidth <= 768 ) {
      html.setAttribute('style','font-size:'+(lastScale*100).toFixed(3)+'px');
    } else {
      html.setAttribute('style','')
    }
  }
  changePage();
  if (!document.addEventListener) return;
  window.addEventListener(resizeEvent, changePage, false);  // 监听设备屏幕旋转/页面resize
  document.addEventListener('DOMContentLoaded', changePage, false); // 监听刷新页面
})(document);

你可能感兴趣的:(CSS,JavaScript)