手写flexible.js的原理实现，我终于明白移动端多端适配

[Sunny-lucking]

前言

今天在看阿里的面试题时，看到这样一道面试题，问flexible.js的原理是什么？

然而我也不知道，但是刚好我又在我公司的项目上遇到过，于是研究一番，遂作此文。

核心原理

简单的一句概括就是： flexible.js帮我们计算出1rem 等于多少px。

怎么计算的？

很简单，就是1rem = 屏幕宽度的1/10

var docEl = document.documentElement  // 返回文档的root元素,即html
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'

我们知道rem的大小是根据html节点的font-size的相对值

例如，iphone 6的屏幕宽度为375px，因此1rem === 37.5px。

计算rem干嘛？

那帮我们计算出rem的值有什么鬼用吗？

确实，如果只是单纯的计算出rem的值并没什么用。发挥它的用处是当我们根据设计稿来转化成页面时需要用到。

举个例子，现在有两个手机，一个手机的屏幕宽度是375px，一个是750px，设计稿给我们的宽度是375px，那我们按照设计稿的设计在375px的手机上刚好完美匹配，但是却会发现在750px的手机上页面只有一半，空白了一半。

这就是我们需要解决的问题，即怎么解决移动端尺寸众多的问题，我们的设计稿是固定，怎么办，如果设计稿是弹性的可以随意缩放该多好。

好吧，设计只给一张设计稿，我们只能想其他方法啦。

等比画饼

想想，有办法了，就像本来你在一张大的纸上面了一饼，现在让你在小的纸上在画一次要怎么画，就是所有东西都等比例画小，如果要画到更大的纸上也是一个道理，等比画大，对不对。

现在我们把设计稿分成10等份，设计稿 A = W/10，我们把设备可视区域也就是我们的各种移动端设备的这个画布也分成10份，并赋值给根元素的fontSize，我们都知道rem是根据根元素字体大小计算的，所以我们的1rem也就是设备可视区域/10，现在设计稿上有一块区域宽B，那它是不是等比放到设备可视区域的宽度为 B/A rem。

再啰嗦一下，B在设计稿上占B/A份，那在设备可视区域上也要占B/A份对不对，所以宽是B/A rem。这就是flexible.js能实现设备兼容的原理。下面看代码

// 首先是一个立即执行函数，执行时传入的参数是window和document
(function flexible (window, document) {
  var docEl = document.documentElement  // 返回文档的root元素
  var dpr = window.devicePixelRatio || 1 // 获取设备的dpr，即当前设置下物理像素与虚拟像素的比值

  // adjust body font size 设置默认字体大小，默认的字体大小继承自body
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports  检测是否支持0.5像素，解决1px在高清屏多像素问题，需要css的配合。
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

这就是flexible.js的源码，超级简单吧。

就这几行代码就有12k的star，要是我也早点发现这个方案就好了。那star就是我的了

现在已经实现了将屏幕分为10等份，也就是1rem。

将设计稿分成10等份

根据我们上面画饼的方案，现在也要把设计稿转化为10等分才行。

我看了下我们项目的实现是用到了postcss-pxtorem插件来实现的

因为设计稿给我们的是px单位的，所以我们在开发的时候只能写px，然后这就需要postcss-pxtorem来帮我们将我们写的px转化为rem了。

安装完postcss-pxtorem之后的配合非常简单，只要在.postcssrc.js文件配置如下就好了

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75,
    }
  }
}

rootValue：75 为啥是75呢，这是因为我们的设计稿的宽度是750px，十分之一就是75px

如果你们的设计稿是375px的，就需要将值改写成37.5

flexible.js升级版

我们公司的使用是在flexible.js的基础上进行了更改，主要是添加了这样一段代码

var metaEl = doc.querySelector('meta[name="viewport"]');
if (metaEl) {
  console.warn('将根据已有的meta标签来设置缩放比例');
  var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
  if (match) {
      scale = parseFloat(match[1]);
      dpr = parseInt(1 / scale);
  }
}

这一串主要是来实现iphone和安卓的设备像素比不一样的问题，例如iphone的一些手机

总结

就这么简单的两步就实现了移动端的适配。

相关参考

• flexible.js 原理解析(看了不会忘)：https://juejin.cn/post/6923060568437817351
• 通过插件postcss-pxtorem轻松实现px到rem转换，完成移动端适配：https://blog.csdn.net/llq886/article/details/105737987

好文推荐

这是我的github，欢迎大家star：https://github.com/Sunny-lucking/blog