修改 flexible源码, 让iphone 6的750px宽度下，html的font-size为100px

事情起因

• 我看了手淘适配方案 flexible 的源码，然后自己使用了这个库后，再对比 手机淘宝 的代码

• 发现问题：

  • 我的项目下
  • 而手机淘宝

• 感情 github 上面的库是坑我呢吧？居然不一样？？？
  
  
  

• 为什么要改？

  • 设计稿，他就是一张以750px为基础设计的。那么问题来了，我们如何将设计稿中的各元素的px转换成rem。
  • 所以 750px 宽度下，font-size: 100px 有利于 px 转 REM 单位的换算
  • 目前Flexible会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：

1a   = 7.5px
1rem = 75px 

那么我们这个示例的稿子就分成了10a，也就是整个宽度为10rem，对应的font-size为75px

这样一来，对于视觉稿上的元素尺寸换算，只需要原始的px值除以rem基准值即可。例如此例视觉稿中的图片，其尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem。

过程

我找了手淘网站的源码后，发现问题

• 手机淘宝 的源码如下

!function(e,t){var n=t.documentElement,d=e.devicePixelRatio||1;function i(){var e=n.clientWidth/3.75;n.style.fontSize=e+"px"}if(function e(){t.body?t.body.style.fontSize="16px":t.addEventListener("DOMContentLoaded",e)}(),i(),e.addEventListener("resize",i),e.addEventListener("pageshow",function(e){e.persisted&&i()}),2<=d){var o=t.createElement("body"),a=t.createElement("div");a.style.border=".5px solid transparent",o.appendChild(a),n.appendChild(o),1===a.offsetHeight&&n.classList.add("hairlines"),n.removeChild(o)}}(window,document)


- 上面是打包过后的代码，其源码如下

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  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 / 3.75
    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
  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))

• 其中关键部分：

function setRemUnit () {
	var rem = docEl.clientWidth / 3.75
 	docEl.style.fontSize = rem + 'px'
}
setRemUnit()

- 但是 flexible 库的是这样的

• flexible 的源码如下

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

• 验证想法的过程

• 所以我把自己的项目里的flexible 也改成 var rem = docEl.clientWidth / 3.75 也能达到同样的效果：

• 在iphone 6 的750px宽度下，html的font-size为100px

• 然后，切换各个机型，同时对比手淘的各个机型，发现 html的font-size 完全一模一样

• 总结：以后就这么改就行了

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  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 / 3.75         // 手机淘宝写法
    // var rem = docEl.clientWidth / 10        // flexible 库源码
    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
  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))

• 打包后的代码 如下

! function (e, t) {
  function n() {
    t.body ? t.body.style.fontSize = 12 * o + "px" : t.addEventListener("DOMContentLoaded", n)
  }

  function d() {
    // var e = i.clientWidth / 10;
    var e = i.clientWidth / 3.75;
    i.style.fontSize = e + "px"
  }
  var i = t.documentElement,
    o = e.devicePixelRatio || 1;
  if (n(), d(), e.addEventListener("resize", d), e.addEventListener("pageshow", function (e) {
      e.persisted && d()
    }), o >= 2) {
    var a = t.createElement("body"),
      s = t.createElement("div");
    s.style.border = ".5px solid transparent", a.appendChild(s), i.appendChild(a), 1 === s.offsetHeight && i.classList.add("hairlines"), i.removeChild(a)
  }
}(window, document);

• 参考文章：【github | 手机淘宝】使用Flexible实现手淘H5页面的终端适配