移动端REM方案-Flexible源码分析

Posted 本期节目

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端REM方案-Flexible源码分析相关的知识，希望对你有一定的参考价值。

大漠老师讲(大漠老师在2017.8月发文中)：Flexible已经完成了他自身的历史使命，我们可以放下Flexible，拥抱新的变化。不过目前手淘首页依然还在使用这个方案(发文时间2018.3)，依然是值得学习，其实这个文章是我2017年春节假期写的，只不过现在才发出来，逃:>

Flexible是目前业界比较知名和成熟的 REM布局方案，源码不多，今天来做一下源码解析。 首先要知道 viewport的概念，我在之前有特意写过。

首先告诉大家， Flexible主要做了下面的事情：

  • 根据屏幕情况在 html根元素上设置 dpr

  • 根据屏幕情况在 html根元素上设置 font-size

  • 根据屏幕情况设置 meta标签

简单说下 px、 em、 rem

无论是 em还是 rem，最后都会换算成 px。

  • px是PC端主要使用的尺寸单位， 1px是一个逻辑像素。

  • em是主要用在移动端字体上。使用了em的父元素的像素大小 × 自己的rem数值 = 终转换出来的像素的数值。由于嵌套多层 em的元素之后， em的计算会变得不可控，所以一般很少大范围布局使用，只会用在字体上。

  • rem是根据根字体，也就是 html根元素上设置的 font-size大小来确定最终像素数字的， 1rem就是根字体的大小， 2rem就是根字体大小的两倍。

这里只是简单说下三者的关系，不做过多的展开，我相信如果来看本文一定大概知道什么是 em和 rem，如果还不知道赶快去补课哦~

源码解析

先看一下完整源码，源码不多，就一百行多一点。

 
   
   
 
    
  
    
    
  
  1. ;(function(win, lib) {
    2. 
  
    
    
  
  2.     var doc = win.document;
    3. 
  
    
    
  
  3.     var docEl = doc.documentElement;
    4. 
  
    
    
  
  4.     var metaEl = doc.querySelector('meta[name="viewport"]');
    5. 
  
    
    
  
  5.     var flexibleEl = doc.querySelector('meta[name="flexible"]');
    6. 
  
    
    
  
  6.     var dpr = 0;
    7. 
  
    
    
  
  7.     var scale = 0;
    8. 
  
    
    
  
  8.     var tid;
    9. 
  
    
    
  
  9.     var flexible = lib.flexible || (lib.flexible = {});
    10. 
  
    
    
  
    11. 
  
    
    
  
  11.     if (metaEl) {
    12. 
  
    
    
  
  12.         console.warn('将根据已有的meta标签来设置缩放比例');
    13. 
  
    
    
  
  13.         var match = metaEl.getAttribute('content').match(/initial-scale=([d.]+)/);
    14. 
  
    
    
  
  14.         if (match) {
    15. 
  
    
    
  
  15.             scale = parseFloat(match[1]);
    16. 
  
    
    
  
  16.             dpr = parseInt(1 / scale);
    17. 
  
    
    
  
  17.         }
    18. 
  
    
    
  
  18.     } else if (flexibleEl) {
    19. 
  
    
    
  
  19.         var content = flexibleEl.getAttribute('content');
    20. 
  
    
    
  
  20.         if (content) {
    21. 
  
    
    
  
  21.             var initialDpr = content.match(/initial-dpr=([d.]+)/);
    22. 
  
    
    
  
  22.             var maximumDpr = content.match(/maximum-dpr=([d.]+)/);
    23. 
  
    
    
  
  23.             if (initialDpr) {
    24. 
  
    
    
  
  24.                 dpr = parseFloat(initialDpr[1]);
    25. 
  
    
    
  
  25.                 scale = parseFloat((1 / dpr).toFixed(2));
    26. 
  
    
    
  
  26.             }
    27. 
  
    
    
  
  27.             if (maximumDpr) {
    28. 
  
    
    
  
  28.                 dpr = parseFloat(maximumDpr[1]);
    29. 
  
    
    
  
  29.                 scale = parseFloat((1 / dpr).toFixed(2));
    30. 
  
    
    
  
  30.             }
    31. 
  
    
    
  
  31.         }
    32. 
  
    
    
  
  32.     }
    33. 
  
    
    
  
    34. 
  
    
    
  
  34.     if (!dpr && !scale) {
    35. 
  
    
    
  
  35.         var isandroid = win.navigator.appVersion.match(/android/gi);
    36. 
  
    
    
  
  36.         var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    37. 
  
    
    
  
  37.         var devicePixelRatio = win.devicePixelRatio;
    38. 
  
    
    
  
  38.         if (isIPhone) {
    39. 
  
    
    
  
  39.             // ios下，对于2和3的屏，用2倍的方案，其余的用1倍方案
    40. 
  
    
    
  
  40.             if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
    41. 
  
    
    
  
  41.                 dpr = 3;
    42. 
  
    
    
  
  42.             } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
    43. 
  
    
    
  
  43.                 dpr = 2;
    44. 
  
    
    
  
  44.             } else {
    45. 
  
    
    
  
  45.                 dpr = 1;
    46. 
  
    
    
  
  46.             }
    47. 
  
    
    
  
  47.         } else {
    48. 
  
    
    
  
  48.             // 其他设备下，仍旧使用1倍的方案
    49. 
  
    
    
  
  49.             dpr = 1;
    50. 
  
    
    
  
  50.         }
    51. 
  
    
    
  
  51.         scale = 1 / dpr;
    52. 
  
    
    
  
  52.     }
    53. 
  
    
    
  
    54. 
  
    
    
  
  54.     docEl.setAttribute('data-dpr', dpr);
    55. 
  
    
    
  
  55.     if (!metaEl) {
    56. 
  
    
    
  
  56.         metaEl = doc.createElement('meta');
    57. 
  
    
    
  
  57.         metaEl.setAttribute('name', 'viewport');
    58. 
  
    
    
  
  58.         metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    59. 
  
    
    
  
  59.         if (docEl.firstElementChild) {
    60. 
  
    
    
  
  60.             docEl.firstElementChild.appendChild(metaEl);
    61. 
  
    
    
  
  61.         } else {
    62. 
  
    
    
  
  62.             var wrap = doc.createElement('div');
    63. 
  
    
    
  
  63.             wrap.appendChild(metaEl);
    64. 
  
    
    
  
  64.             doc.write(wrap.innerHTML);
    65. 
  
    
    
  
  65.         }
    66. 
  
    
    
  
  66.     }
    67. 
  
    
    
  
    68. 
  
    
    
  
  68.     function refreshRem(){
    69. 
  
    
    
  
  69.         var width = docEl.getBoundingClientRect().width;
    70. 
  
    
    
  
  70.         debugger;
    71. 
  
    
    
  
  71.         if (width / dpr > 540) {
    72. 
  
    
    
  
  72.             width = 540 * dpr;
    73. 
  
    
    
  
  73.         }
    74. 
  
    
    
  
  74.         var rem = width / 10;
    75. 
  
    
    
  
  75.         docEl.style.fontSize = rem + 'px';
    76. 
  
    
    
  
  76.         flexible.rem = win.rem = rem;
    77. 
  
    
    
  
  77.     }
    78. 
  
    
    
  
    79. 
  
    
    
  
  79.     win.addEventListener('resize', function() {
    80. 
  
    
    
  
  80.         clearTimeout(tid);
    81. 
  
    
    
  
  81.         tid = setTimeout(refreshRem, 300);
    82. 
  
    
    
  
  82.     }, false);
    83. 
  
    
    
  
  83.     win.addEventListener('pageshow', function(e) {
    84. 
  
    
    
  
  84.         if (e.persisted) {
    85. 
  
    
    
  
  85.             clearTimeout(tid);
    86. 
  
    
    
  
  86.             tid = setTimeout(refreshRem, 300);
    87. 
  
    
    
  
  87.         }
    88. 
  
    
    
  
  88.     }, false);
    89. 
  
    
    
  
    90. 
  
    
    
  
  90.     if (doc.readyState === 'complete') {
    91. 
  
    
    
  
  91.         doc.body.style.fontSize = 12 * dpr + 'px';
    92. 
  
    
    
  
  92.     } else {
    93. 
  
    
    
  
  93.         doc.addEventListener('DOMContentLoaded', function(e) {
    94. 
  
    
    
  
  94.             doc.body.style.fontSize = 12 * dpr + 'px';
    95. 
  
    
    
  
  95.         }, false);
    96. 
  
    
    
  
  96.     }
    97. 
  
    
    
  
    98. 
  
    
    
  
    99. 
  
    
    
  
  99.     refreshRem();
    100. 
  
    
    
  
    101. 
  
    
    
  
  101.     flexible.dpr = win.dpr = dpr;
    102. 
  
    
    
  
  102.     flexible.refreshRem = refreshRem;
    103. 
  
    
    
  
  103.     flexible.rem2px = function(d) {
    104. 
  
    
    
  
  104.         var val = parseFloat(d) * this.rem;
    105. 
  
    
    
  
  105.         if (typeof d === 'string' && d.match(/rem$/)) {
    106. 
  
    
    
  
  106.             val += 'px';
    107. 
  
    
    
  
  107.         }
    108. 
  
    
    
  
  108.         return val;
    109. 
  
    
    
  
  109.     }
    110. 
  
    
    
  
  110.     flexible.px2rem = function(d) {
    111. 
  
    
    
  
  111.         var val = parseFloat(d) / this.rem;
    112. 
  
    
    
  
  112.         if (typeof d === 'string' && d.match(/px$/)) {
    113. 
  
    
    
  
  113.             val += 'rem';
    114. 
  
    
    
  
  114.         }
    115. 
  
    
    
  
  115.         return val;
    116. 
  
    
    
  
  116.     }
    117. 
  
    
    
  
    118. 
  
    
    
  
  118. })(window, window['lib'] || (window['lib'] = {}));
    119.

代码包裹

 
   
   
 
    
  
    
    
  
  1. ;(function(win, lib) {
    2. 
  
    
    
  
  2.     // Flexible code
    3. 
  
    
    
  
  3. })(window, window['lib'] || (window['lib'] = {}));
    4.

典型的自动执行的闭包，将 window和 window.lib作为实参传递匿名函数的形参上，如果 window上没有 lib这个对象，就创建这个对象，那么 window.lib是干什么的呢？在移动模式打开 m.taobao.com，控制台打印 window.lib，会发现有一个 flexible的对象，同时也有很多对象，所以 window.lib应该是手机淘宝内部为了管理类库命名空间用的，防止随便污染 window全局对象，这个方法也可以借鉴到自己的项目中管理公用类库的命名空间。

变量定义

 
   
   
 
    
  
    
    
  
  1.     var doc = win.document;
    2. 
  
    
    
  
  2.     var docEl = doc.documentElement;
    3. 
  
    
    
  
  3.     var metaEl = doc.querySelector('meta[name="viewport"]');
    4. 
  
    
    
  
  4.     var flexibleEl = doc.querySelector('meta[name="flexible"]');
    5. 
  
    
    
  
  5.     var dpr = 0;
    6. 
  
    
    
  
  6.     var scale = 0;
    7. 
  
    
    
  
  7.     var tid;
    8. 
  
    
    
  
  8.     var flexible = lib.flexible || (lib.flexible = {});
    9.
变量 作用
docEl document缓存
docEl documentElement缓存，即根元素html的dom
metaEl viewport属性的meta标签
flexibleEl flexible属性的meta标签，不是官方标准的meta标签，手机淘宝自己定的
dpr 设备像素比
scale 页面缩放比例
tid 缓存定时器timer
flexible flexible库的公用对象，一些公用的方法和属性都对定义在这个对象上

读取当前meta标签

 
   
   
 
    
  
    
    
  
  1.     if (metaEl) {
    2. 
  
    
    
  
  2.         console.warn('将根据已有的meta标签来设置缩放比例');
    3. 
  
    
    
  
  3.         var match = metaEl.getAttribute('content').match(/initial-scale=([d.]+)/);
    4. 
  
    
    
  
  4.         if (match) {
    5. 
  
    
    
  
  5.             scale = parseFloat(match[1]);
    6. 
  
    
    
  
  6.             dpr = parseInt(1 / scale);
    7. 
  
    
    
  
  7.         }
    8. 
  
    
    
  
  8.     } else if (flexibleEl) {
    9. 
  
    
    
  
  9.         var content = flexibleEl.getAttribute('content');
    10. 
  
    
    
  
  10.         if (content) {
    11. 
  
    
    
  
  11.             var initialDpr = content.match(/initial-dpr=([d.]+)/);
    12. 
  
    
    
  
  12.             var maximumDpr = content.match(/maximum-dpr=([d.]+)/);
    13. 
  
    
    
  
  13.             if (initialDpr) {
    14. 
  
    
    
  
  14.                 dpr = parseFloat(initialDpr[1]);
    15. 
  
    
    
  
  15.                 scale = parseFloat((1 / dpr).toFixed(2));
    16. 
  
    
    
  
  16.             }
    17. 
  
    
    
  
  17.             if (maximumDpr) {
    18. 
  
    
    
  
  18.                 dpr = parseFloat(maximumDpr[1]);
    19. 
  
    
    
  
  19.                 scale = parseFloat((1 / dpr).toFixed(2));
    20. 
  
    
    
  
  20.             }
    21. 
  
    
    
  
  21.         }
    22. 
  
    
    
  
  22.     }
    23.

  • if：在有 viewport的 meta标签下，如果发现设置了缩放比例，获取 initial-scale设置的值，并根获取到的据缩放比例设置dpr的数值。

  • else if：在有 flexible的 meta标签下，获取 initial-dpr， maximum-dpr的值，根据获取到的数值设置 dpr和 scale。以 maximum-dpr的 dpr值为基准， toFixed是为了小数点后取两位第三位四舍五入。 flexible的 meta标签是为了能够让用户自己设置缩放比例，而不是使用通过屏幕尺寸实际计算出来的 dpr和 scale值，一般很少用到。

计算dpr和scale值

 
   
   
 
    
  
    
    
  
  1.     if (!dpr && !scale) {
    2. 
  
    
    
  
  2.         var isAndroid = win.navigator.appVersion.match(/android/gi);
    3. 
  
    
    
  
  3.         var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    4. 
  
    
    
  
  4.         var devicePixelRatio = win.devicePixelRatio;
    5. 
  
    
    
  
  5.         if (isIPhone) {
    6. 
  
    
    
  
  6.             if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
    7. 
  
    
    
  
  7.                 dpr = 3;
    8. 
  
    
    
  
  8.             } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
    9. 
  
    
    
  
  9.                 dpr = 2;
    10. 
  
    
    
  
  10.             } else {
    11. 
  
    
    
  
  11.                 dpr = 1;
    12. 
  
    
    
  
  12.             }
    13. 
  
    
    
  
  13.         } else {
    14. 
  
    
    
  
  14.             // 其他设备下，仍旧使用1倍的方案
    15. 
  
    
    
  
  15.             dpr = 1;
    16. 
  
    
    
  
  16.         }
    17. 
  
    
    
  
  17.         scale = 1 / dpr;
    18. 
  
    
    
  
  18.     }
    19.

如果用户没有手动设置 viewport或 flexible的 meta标签，就需要根据 devicePixelRatio这个属性设置。计算法方法：

水平逻辑像素数 / 水平物理像素数 = window.devicePixelRatio。

也就是设备像素比，是 window上的只读属性。

首先是 Android与 iOS的设备类型判断和获取 devicePixelRatio值。两种平台的设备策略不一样， iPhone存在一倍、二倍、三倍屏幕，根据不同倍率的情况使用不同的 dpr值，但是除了 iPhone以外的设备都是将 dpr值设置为，好处是不用处理各种奇葩的屏幕像素比和分辨率，但是带来的缺点是在很多 Android高清屏下页面图片会不清晰。

实际上 dpr和 scale是绑定的，计算方法是这样： scale=1/dpr;。

dpr主要是为了不同像素比屏幕下显示文字用的，而 scale是为了解决 1px的线过于粗的问题。

设置 dpr和 scale

 
   
   
 
    
  
    
    
  
  1.     docEl.setAttribute('data-dpr', dpr);
    2. 
  
    
    
  
  2.     if (!metaEl) {
    3. 
  
    
    
  
  3.         metaEl = doc.createElement('meta');
    4. 
  
    
    
  
  4.         metaEl.setAttribute('name', 'viewport');
    5. 
  
    
    
  
  5.         metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    6. 
  
    
    
  
  6.         if (docEl.firstElementChild) {
    7. 
  
    
    
  
  7.             docEl.firstElementChild.appendChild(metaEl);
    8. 
  
    
    
  
  8.         } else {
    9. 
  
    
    
  
  9.             var wrap = doc.createElement('div');
    10. 
  
    
    
  
  10.             wrap.appendChild(metaEl);
    11. 
  
    
    
  
  11.             doc.write(wrap.innerHTML);
    12. 
  
    
    
  
  12.         }
    13. 
  
    
    
  
  13.     }
    14.

计算出 dpr和 scale，就设置到页面中。

  • dpr会设置在 html根元素上，如果是二倍屏，eg： <htmldata-dpr="2"></html>。

  • scale会设置在 viewport的 meta标签中，如果是三倍屏，eg： <metaname="viewport"content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

说到这里，可能有疑问，为什么要缩放，上面说了，就是为了解决 1px的线在高清屏幕中太粗的问题，但是缩放后会导致 viewport的尺寸变大，关于 viewport的事情，之前的文章已经解释过了。下面设置 html根元素的 font-size也会根据这个 scale的数值进行调整。

计算 html根元素的 font-size

 
   
   
 
    
  
    
    
  
  1.     function refreshRem(){
    2. 
  
    
    
  
  2.         var width = docEl.getBoundingClientRect().width;
    3. 
  
    
    
  
  3.         if (width / dpr > 540) {
    4. 
  
    
    
  
  4.             width = 540 * dpr;
    5. 
  
    
    
  
  5.         }
    6. 
  
    
    
  
  6.         var rem = width / 10;
    7. 
  
    
    
  
  7.         docEl.style.fontSize = rem + 'px';
    8. 
  
    
    
  
  8.         flexible.rem = win.rem = rem;
    9. 
  
    
    
  
  9.     }
    10.

docEl.getBoundingClientRect().width和 document.documentElement.clientWidth获得的数值是一样的，只不过在屏幕旋转和尺寸变化的时候，这个属性获取速度更快，而 clientWidth会稍微有点延迟，淘宝能把技术做到这么细，也是厉害了。

width/dpr 的出来的是设备的 ideal viewport，也就是设备的最理想宽度，如果超过 540说明基本上已经不是移动设备了，因为 iPhone6Plus的 ideal viewport也只有 414，比 iPhone6Plus再大的设备基本上是平板级别的设备了。

这里的 1rem的基准是屏幕宽度的1/10，也就是 layout viewport的大小的1/10，选1/10官网说是为了兼容 vh、 vw这样的长度单位，不过我认为这带来了计算复杂度，为什么计算复杂，我们下面再说。

计算出 1rem的像素数之后设置到 html根元素上并导出到 window和 flexible对象上。

我们来看几张图，更直观的理解下如果处理缩放后的尺寸：

移动端REM方案-Flexible源码分析

屏幕是几倍屏幕是根据 window.devicePixelRatio的数值决定的。

其中 iPhone3GS是一倍屏， iPhone5、 iPhone6是二倍屏， iPhone6Plus是三倍屏。

在二倍屏的 iPhone6中，会设置

 
   
   
 
    
  
    
    
  
  1. <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
    2.

缩小了两倍， layout viewport变成了 750px，是 ideal viewport``375px的二倍，所以 1rem是 75px。

在三倍屏的 iPhone6Plus中，会设置

 
   
   
 
    
  
    
    
  
  1. <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
    2.

layout viewport变成了 1242px，是 ideal viewport``414px的二倍，所以 1rem是 124.2px。

可以看到，缩小比例越大，最后设置的 html的 font-size也就越大，这就保证了，无论在什么尺寸，什么缩放比例的屏幕下， 1rem的大小都是屏幕的十分之一的大小。

另外，大家自己做实验的时候，切换设备一定要刷新，因为 devicePixelRatio不会动态变化和获取， devicePixelRatio的变化也没有回调函数通知。

设置计算数值到页面中

 
   
   
 
    
  
    
    
  
  1.     win.addEventListener('resize', function() {
    2. 
  
    
    
  
  2.         clearTimeout(tid);
    3. 
  
    
    
  
  3.         tid = setTimeout(refreshRem, 300);
    4. 
  
    
    
  
  4.     }, false);
    5. 
  
    
    
  
  5.     win.addEventListener('pageshow', function(e) {
    6. 
  
    
    
  
  6.         if (e.persisted) {
    7. 
  
    
    
  
  7.             clearTimeout(tid);
    8. 
  
    
    
  
  8.             tid = setTimeout(refreshRem, 300);
    9. 
  
    
    
  
  9.         }
    10. 
  
    
    
  
  10.     }, false);
    11. 
  
    
    
  
    12. 
  
    
    
  
  12.     if (doc.readyState === 'complete') {
    13. 
  
    
    
  
  13.         doc.body.style.fontSize = 12 * dpr + 'px';
    14. 
  
    
    
  
  14.     } else {
    15. 
  
    
    
  
  15.         doc.addEventListener('DOMContentLoaded', function(e) {
    16. 
  
    
    
  
  16.             doc.body.style.fontSize = 12 * dpr + 'px';
    17. 
  
    
    
  
  17.         }, false);
    18. 
  
    
    
  
  18.     }
    19. 
  
    
    
  
    20. 
  
    
    
  
    21. 
  
    
    
  
  21.     refreshRem();
    22.

这块比较简单了，监听了 resize和 pageshow这两个会引起页面尺寸发生变化的事件，然后运行 refreshRem方法重新计算。

在页面的DOM加载完成的情况下，给 body设置了 12*dpr大小的文字大小，一倍屏下是 12px、二倍屏是 24px，三倍屏是 36px，文字不用 rem作为单位是为了让更大的屏幕能够展示更多的文字，当然这样文字的大小就需要动态去算了，这就需要用构建工具处理，如果嫌麻烦文字用 rem作为单位也不会有什么特别大的问题。

首次要运行一下 refreshRem方法。

导出属性与方法

 
   
   
 
    
  
    
    
  
  1.     flexible.dpr = win.dpr = dpr;
    2. 
  
    
    
  
  2.     flexible.refreshRem = refreshRem;
    3. 
  
    
    
  
  3.     flexible.rem2px = function(d) {
    4. 
  
    
    
  
  4.         var val = parseFloat(d) * this.rem;
    5. 
  
    
    
  
  5.         if (typeof d === 'string' && d.match(/rem$/)) {
    6. 
  
    
    
  
  6.             val += 'px';
    7. 
  
    
    
  
  7.         }
    8. 
  
    
    
  
  8.         return val;
    9. 
  
    
    
  
  9.     }
    10. 
  
    
    
  
  10.     flexible.px2rem = function(d) {
    11. 
  
    
    
  
  11.         var val = parseFloat(d) / this.rem;
    12. 
  
    
    
  
  12.         if (typeof d === 'string' && d.match(/px$/)) {
    13. 
  
    
    
  
  13.             val += 'rem';
    14. 
  
    
    
  
  14.         }
    15. 
  
    
    
  
  15.         return val;
    16. 
  
    
    
  
  16.     }
    17.

导出 dpr和计算根元素字体的 refreshRem方法。又导出了 rem2px和 px2rem两个方法，通过名字能够看得出来这两个方法是做 px与 rem相互转换的，下面我们来说说这两个方法和转换规则。

以 iPhone6为例，它的理想视口宽度是 375，由于为了适配二倍屏，我们将它缩小到原来的 0.5，那么页面的视口就变成了 750了， 1rem是 75px。

加入设计师根据 iPhone6的尺寸提供设计稿，下面几个小学计算题我们来一下：

  • 设计稿中的 75px，我们要写 75/75 = 1rem

  • 设计稿中的 100px，我们要写 100/75 = 1.33rem

  • 设计稿中的 180px，我们要写 150/75 = 2.4rem

我们现在的计算过程就是 px2rem做的事情，用 设计稿中的px / 1rem的px数 = 代码中的rem数值

而 rem2px就比较好理解了，直接用 1rem的px数 * 传入的rem数值 = 实际的px大小。

可以看到，我们将 px转化为 rem的时候计算已经不是很方便了，实际开发难道要算 180/75=2.4这种算术题吗？不，一定不可以！所有有 postcss-px2rem这样的插件，也可以自己写 sass的函数来计算。这也算是 Flexible的一个麻烦的地方吧，我们可以改 Flexible的源代码自己重写 refreshRem方法，让计算变的简单点，这个我们后续有机会再说。

结束

Flexible的源码已经精解完了，大家明白了吗？


以上是关于移动端REM方案-Flexible源码分析的主要内容，如果未能解决你的问题，请参考以下文章

Vant移动端rem适配方案

「前端」rem 缩放方案 flexible-js 兼容 375px 方案的思路

移动端REM布局方案

Vue移动端适配方案.md

移动端页面适配问题

基于vue-cli配置手淘的lib-flexible + rem，实现移动端自适应