我的rem响应式解决方案

一、原理：

虽然大家都喜欢直接拿代码，但是原理还是不得不说的。走的越远，越发现理论的重要性。

关键知识：

1：rem是定义在html元素上面的，并且必须设置font-size（别和我扣，我也知道body上面也可以）

2、浏览器内用rem就必须在初始的html元素上面定义fontSize大小，并且需要设置随着页面变化fontSize也会随之变化

这里很多新手都不知道，直接拿来用虽然看着没问题，但是你得页面不是响应式的。

3、举例：1rem=30px 则页面下面所有使用rem单位的元素字体都以30px为基准单位，会被换算。

4、浏览器字体坑：谷歌浏览器字体最小设置10px，也就是说你rem的值变化到了10px以下的时候页面也不在是响应式而是以10位基准单位。

每个浏览器都不一样，所以rem变化的值最好都比浏览器最小字体大。通常来说不小于16px吧（错了就自己console下）

5、实现原理：参考小程序rpx单位，将页面分割为自定义的相等份。假如页面定义分割为50份，页面像素1000px，则1rem等于20px。这就是原理。

说白了就是页面分割为50份，每份20px，那么你在使用的时候就是1rem=20px

小程序也是同样的原理，不过小程序是把页面分割为750份。

6、手机似乎不存在最新字体问题，但建议不要小于10px

二、实现

1、最简单的实现方式，用css方式，但是建议在谷歌浏览器下，并且隐藏滚动条，否则pc（电脑）端不合适。

该方式比较适合手机端，因为手机端滚动条等于没用，说白了就是完全可以隐藏的。

代码：

/*实现类似小程序rpx语法，用rem替代px，将页面拆分为50份，然后再进行使用
  以下css适合谷歌浏览器，需要配合::-webkit-scrollbar进行滚动条隐藏
*/
/*html{
  font-size: calc(100vw / 50);
}
!*css隐藏滚动条不支持ie*!
::-webkit-scrollbar {display:none}*/

2、兼容所有浏览器，但是性能等略微下降，浏览器流畅需要非常非常仔细才能体验出来（用户才不会知道这呢）。不影响体验。

以下代码是自己写的，参考了淘宝rem。但是可以自己多研究，发现问题不大。如果需要改为适应手机端的则把50改为20以下数字。

说实在这个代码适合pc端，不适合手机端。（个人感觉，不觉得上面的代码简单到爆吗？）

responsive() {
  rem();
  //响应式代码解决方案，rem处理
  //rem事件监听，保证响应式触发
  window.addEventListener("resize", rem);
  window.addEventListener("pageshow", function(e) {
    //前进后退事件,移动端，暂时没啥用
    if (e.persisted) {
      rem();
    }
  });
  function rem() {
    //rem修改
    //多减去1，不行则2，因为浏览器滚动条会更宽1像素
    //是否减去滚动条宽度，请各位根据自己的页面进行改动，以下代码是无论如何都会减去滚动条宽度的
    let width: number = window.innerWidth - getScrollWidth() - 1;    document.getElementsByTagName("html")[0].style.fontSize =
      width / 50 + "px";
    console.log(width);
    /*
    document.body.clientWidth,document.body.offsetWidth
    document.body.offsetWidth 获取body元素对象的宽度，
    即offsetWidth=width+padding+border，
    也可以写成offsetWidth=clientWidth+border
    */
    function getScrollWidth() {
      //获取页面滚动条宽度
      var noScroll,
        scroll,
        oDiv = document.createElement("DIV");
      oDiv.style.cssText =
        "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;";
      noScroll = document.body.appendChild(oDiv).clientWidth;
      oDiv.style.overflowY = "scroll";
      scroll = oDiv.clientWidth;
      document.body.removeChild(oDiv);
      return noScroll - scroll;
    }
  }
}

三、注明

参考：淘宝rem https://github.com/amfe/lib-flexible（未处理滚动条问题，因为淘宝用于手机端）

rem：https://www.html.cn/book/css/values/length/rem.htm

四、废话

最近学typescript，感觉好苦逼啊，这玩意真的虐自己。

看文章的刷新下，我可能会修改错误的地方