flexible原理解析

github仓库：github.com/amfe/lib-fl…

使用方法

安装

npm i -S amfe-flexible

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>

原理解析

源码只有短短43行，讲解分为两部分：代码中的注释和与原理总结

源码注释

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

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

  // set 1rem = viewWidth / 10
  // 设置root元素的fontSize = 其clientWidth / 10 + ‘px’
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // 当页面展示或重新设置大小的时候，触发重新
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // 检测0.5px的支持，支持则root元素的class中有hairlines
  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))

原理总结

首先有几个名词需要解释一下:

rem

以rem为单位，其值是相对root html元素，与em这个相对于父元素的单位不同。

rem是flexible这套适配方案的核心

rem的详情点击此处

Element​.clientWidth

如上图所示，clientWidth是元素内部的宽度，包括padding，但不包括border，margin和垂直的滚动条

Element​.clientWidth的详情点击此处

Document​.document​Element

Document​.document​Element 返回文档的root元素，HTML文档的元素

window.devicePixelRatio

window.devicePixelRatio返回当前显示设备下物理像素与设备独立像素的比值，同样也可以解读为一个设备独立像素是有几个物理像素来展示的。

物理像素

物理像素是组成成像传感器的最基础单元的尺寸。

设备独立像素 - Device Independent Pixels（dip）

设备独立像素是一个物理测量单位，是操作系统层面设置的虚拟像素。对于前端来说是定值。

当页面设置了，那document.documentElement.clientWidth就等于设备独立像素的宽度

window.devicePixelRatio的详情点击此处

总结

首先通过设置meta，其主要作用的是width=device-width，使用这个之后，document.documentElement.clientWidth就等于设备独立像素的宽度。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

然后给root元素设置fontSize为document.documentElement.clientWidth的十分之一，这样1rem就等于document.documentElement.clientWidth/10,以此做适配。

rem并非是完美的适配方案，使用了rem，最后渲染时还是转换成px，这时小数部分就四舍五入，有些结果并不是我们想要的。

meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

meta标签中的viewport作用是什么呢？

viewport，在浏览器环境中，表示当前的浏览器的可视区域，正在被浏览的页面，在这块区域中被展示。

viewport，设置了viewport的初始尺寸，仅可使用在移动端。