今天有个朋友问我关于rem的适配问题，我只给出了我自己的一个js解决方案，当我去查找相关资料的时候，发现我写的js跟人家的还是有点差距的，细节的东西没考虑。

实现思路

rem适配的实现思路: 根据设备视口宽度动态设置html的font-size。
举个例子：如果在iPhone6(设备独立像素为375px)下，一个div的宽度为50px，我们设置iPhone6下html的font-size为100px，当换成一个设备独立像素为400px的设备时，此时html的fon-size应该为：（400 / 375）* 100px。

代码实现

首先先贴一下我实现的代码：

  1. handleResize();
  2. window.addEventListener('resize', handleResize, false);
  4. function handleResize() {
  5.     var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
  6.   var rootFont = (clientWidth / 375) * 100 + 'px';
  7.   document.documentElement.style.fontSize = rootFont;
  8. }

我主要是针对iPhone6的设计稿进行设置的，如果你们的设计稿是其他设备的，根据设备像素比进行换算就行了。

再来看一个更加细致的写法：

  1. (function() {
  2.   var docEl = document.documentElement,
  3.       resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  5.   function handleResize() {
  6.       var clientWidth = docEl.clientWidth;
  7.     if (!clientWidth) return;
  9.     docEl.style.fontSize = (clientWidth / 375) * 100 + 'px';
  10.   }
  12.   if (!document.addEventListener) return;
  13.   window.addEventListener(resizeEvt, handleResize, false);
  14.   window.addEventListener('DOMContentLoaded', handleResize, false);
  15. })();

我们来分析一下，这段代码有什么出众之处，我总结了一下：

  1. 使用了立即执行函数，将函数主体逻辑封装起来，避免变量污染
  2. 使用了正确的监听事件
  3. 进行类型判断，如果不存在此事件或方法则跳出函数作用域

这里要说一下设备像素比，设备像素比也就是设备上物理像素和设备独立像素的比例，用公式表示就是：
dpr = 物理像素 / 设备独立像素;
可以用window.devicePixelRatio获取到当前设备的dpr，不能用这个方法改变dpr哦～～

最后来个终极兼容性写法：

  1. (function (doc, win) {
  2.     var docEl = document.documentElement,
  3.       resizeEv = 'orientationchange' in window ? 'orientationchange' : 'resize',
  4.       recalz = function () {
  5.           var clientWidth = docEl.clientWidth;
  6.         if (!clientWidth) return;
  8.         // 基于750px设计稿计算rem值，其他尺寸设计稿相应替换750即可
  9.         if (clientWidth >= 750) {
  10.             docEl.style.fontSize = '100px';
  11.         } else {
  12.             docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
  13.         };
  15.         var html = document.getElementsTagName['html'][0];
  16.         var settedFs = settingFs = parseInt(100 * (clientWidth / 750));
  17.         var whileCount = 0;
  19.         while (whileCount < 100) {
  20.             var realFs = parseInt(window.getComputedStyle(html).fontSize);
  21.           var delta = realFs - settedFs;
  23.           // 未成功设置font-size时
  24.           if (Math.abs(delta) >= 1) {
  25.               delta > 0 ? settingFs-- : settingFs++;
  26.             html.setAttribute('style', 'font-size: ' + settingFs + 'px!important;');
  27.           } else {
  28.               break;
  29.           }
  30.         }
  32.         if (!doc.addEventListener) return;
  33.         win.addEventListener(resizeEv, recalz, false);
  34.         doc.addEventListener('DOMContentLoaded', recalz, false)
  35.       }
  36. })(document, window);

总结

这篇文章更像是一个随笔，知识点不多，主要是给自己看下，回忆知识点。如果对您帮助不大请见谅～～～