移动端rem距离单位的使用

Posted 2020-11-13 jacob98

在做移动端开发的时候大家肯定会遇到适配问题，手机的屏幕大小有非常多的类别，使用传统的px距离单位已经无法满足我们的需要，于是rem便横空出世，他与百分比定位是比较像的，但是也是有一定的区别，在这里就跟大家分享一下rem的使用方法。

rem是一个相对单位，他的大小是可以根据你的计算来定的，比如说在我的移动端网页中rem与px的换算规则如下：

1rem = 100px

在UI给我的设计稿中是以750px的宽度为标准设计的，于是在我的移动端网页中就以750px为标准规定rem的换算规则，请看以下代码：

(function(doc, win) {
  var docEl = doc.documentElement,
  resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
  recalc = function() {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    if (clientWidth > 750) {
      docEl.style.fontSize = "100px"; // 修正一下大于750的字体大小为100px
    } else {
      docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
    }
    /*
     * 100 -> html,body {  font-size:100px; }
     * 750 -> 此处以 iPhone6 两倍设计稿 宽度750px 布局页面
     * 根据具体情况改变这两个数值
     */
  };

if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

大致原理就是监听window的resize，当浏览器窗口大小变化时就会触发我设置的函数，重新定义rem的换算规则，这样就可以对不同屏幕大小的距离单位进行适配。