30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)

Posted 2020-08-31 不再犯错

用rem来实现移动端的弹性布局是个好主意！用法如下：

CSS

@media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
    html {
	    font-size:10px;
    }
}
@media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
    html {
	    font-size:20px;
    }
}
.test-div{width: 10rem;}

那么这个.test-div的宽度在320px的分辨率下会是10 * 10 = 100px, 在640下是10 * 20 = 200px，从而达到了弹性缩放的目的。

但是这样做还是有2个问题：

1. 随着各种新手机的发布，分辨率也碎片化了，我们无法预知将来会出现的分辨率宽度，我们不可能把所有要兼容的分辨率写到css里。

2. 这样写只能做到页面适配不同的宽度，对于那种在各种屏幕上都要在一屏幕内显示的页面，就没有办法适配了。

比如这种非常流行的整屏滑动页面，当屏幕宽高比小于设计稿的比例时会缩放：

所以完美解决适配的问题就得靠js了，思路非常简单，判断一下当前终端的宽度（这里在安卓上有个坑，后面会说）和设计稿宽度的比例，计算出需要缩放的倍数，然后根据这个倍数值改变html的字体大小即可。

如果需要横竖屏都适配，那么根据终端宽高比例较小的那一个来计算。用通俗的语言来说，如果终端屏幕比设计稿更加宽矮一些，那么久根据它和设计稿的高度比例来计算字体。

思路永远是简单，实现永远是有问题需要解决的，先上代码：

https://github.com/leon776/setHtmlRem

javascript

console.time("test");
/*
    # 按照宽高比例设定html字体, width=device-width initial-scale=1版
    # @pargam win 窗口window对象
    # @pargam option{
      designWidth: 设计稿宽度，必须
      designHeight: 设计稿高度，不传的话则比例按照宽度来计算，可选
      designFontSize: 设计稿宽高下用于计算的字体大小，默认20，可选
      callback: 字体计算之后的回调函数，可选
    }
    # return Boolean;
    # [email protected]
    # ps:请尽量第一时间运行此js计算字体
*/
!function(win, option) {
  var count = 0, 
      designWidth = option.designWidth, 
      designHeight = option.designHeight || 0, 
      designFontSize = option.designFontSize || 20, 
      callback = option.callback || null,
      root = document.documentElement,
      body = document.body,
      rootWidth, newSize, t, self;
      root.style.width = 100%;
  //返回root元素字体计算结果
  function _getNewFontSize() {
    var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth;
    return parseInt( scale * 10000 * designFontSize ) / 10000;
  }
  !function () {
    rootWidth = root.getBoundingClientRect().width;
    self = self ? self : arguments.callee;
    //如果此时屏幕宽度不准确，就尝试再次获取分辨率，只尝试20次，否则使用win.innerWidth计算
    if( rootWidth !== win.innerWidth &&  count < 20 ) {
      win.setTimeout(function () {
        count++;
        self();
      }, 0);
    } else {
      newSize = _getNewFontSize();
      //如果css已经兼容当前分辨率就不管了
      if( newSize + ‘px‘ !== getComputedStyle(root)[‘font-size‘] ) {
        root.style.fontSize = newSize + "px";
        return callback && callback(newSize);
      };
    };
  }();
  //横竖屏切换的时候改变fontSize，根据需要选择使用
  win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    clearTimeout(t);
    t = setTimeout(function () {
      self();
    }, 300);
  }, false);
}(window, {
  designWidth: 640, 
  designHeight: 1136,
  designFontSize: 20,
  callback: function (argument) {
    console.timeEnd("test")
  }
});

然后再说几个点和问题：1. 这段代码对viewport有要求，必须是width=device-width initial-scale=1，即窗口的大小是设备物理宽度(分辨率 / devicePixelRatio)，并且禁止缩放。另外还有一种做法就是手机淘宝的做法，窗口大小是分辨率宽度，然后缩放倍数是1/devicePixelRatio，这里暂且不讨论。

2.就是解决安卓上的问题。经过实测，有些安卓机器，使用1的viewport，在页面刚加载的时候。不管是读取window.innerWidth，还是doc的getBoundingClientRect().width，或者是body的clientWidth，都不是设备的物理宽度。所以只好祭出黑魔法setTimeout，一试果然可以，异步100ms执行获取屏幕宽度的代码就准确了。但是这种不可控的代码让人不爽。

因为width=device-width initial-scale=1，documentElement的宽度又是100%，所以当这两个值相等的时候我们可以认为目前获取到的屏幕宽度是准确的。那么使用此条件作为判断条件，不断的setTimeout(fun(){}, 0)去判断，当此条件为真时改变documentElement的字体。可以尽可能快的执行目标代码。但是又万一这两个值一直不相等又不能无限的死循环下去，所以设置了一个尝试上限，到上限之后用窗口宽度来计算（缩放比例不对的话用户起码可以看到完整的页面）。在chrome下测试，执行40次代码的平均时间是230ms，考虑到安卓机的js引擎速度，将上限设为了20。

3.是执行时机，个人建议将这段代码放到head里，第一时间计算好html的fontSize，避免重绘。如果你有有一些跟获取dom元素尺寸相关的操作，就得放到这个计算函数的回调里面了，这时候就不能放到head里(因为运行的时候dom都还没加载)，只能放到底部或者doc的ready事件里了。最佳实践是有一个全屏的loading画面，当fontSize计算好了之后再把真正的页面展示出来。