移动端适配方案--flexible解读

有的没的知识储备

响应式 —— 在css中，针对不同大小的浏览器窗口，用不同的方式相应更新页面的样式。
1inch（英寸） = 25.4mm（毫米） = 6pc（pica，印刷术语，长度为12points） = 72pt（点） = 96px（像素）

em —— 基准是 当前元素的字号（font-size）大小，实际值取决于在哪个元素上应用。

• 基准是当前元素的font-size
• 如果当前元素的字号用的是em，那么当前元素字号的基准是其父元素
• 先算出当前元素的font-size的像素值，再计算其他使用em作为单位的属性值大小

rem —— 是根em的缩写，基准是根元素的字号大小**

视口viewport —— 浏览器窗口中用来渲染页面的可视区域，不包括浏览器的地址栏、工具栏、状态栏等。
相关单位

• vh ——视口高度的1/100
• vw——视口宽度的1/100
• vmin——视口宽度或者高度较小值的1/100
• vmax——视口官渡或者高度较大值的1/100（横竖屏时可以用这两个值）

flexible源码解读

// 立即执行函数，入参是window和document
(function flexible (window, document) {
  var docEl = document.documentElement
  // 文档的root元素
  var dpr = window.devicePixelRatio || 1
  // 获取设备的dpr（返回当前显示设备的物理像素分辨率与css像素分辨率之比），它告诉浏览器应该使用多少屏幕实际像素来绘制单个css像素，

  // adjust body font size
  // 调整body标签的fontsize，fontsize = (12 * dpr) + 'px'
  // 设置默认字体大小，默认的字体大小继承自body，如果子元素没有设置font-size就继承父元素设置的这个默认字号（这个地方有个疑问，为什么以12位基准，是因为浏览器的最小显示的字号是12吗？）
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  // 设置根元素的fontsize为clientwidth/10（除以10纯粹是为了计算方便）这个地方也可以直接写10vw（表示可视窗口的宽度的十分之一）
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  // 当页面展示或重新设置大小的时候，重新对rem的px值进行计算
  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))

px转rem方法

来做一道应用题：
已知屏幕实际宽度为W，设计稿上的屏幕宽度为w，设计稿上的某个元素的宽度是x，求这个元素实际宽度X
解：
屏幕实际宽度和屏幕在设计稿上的宽度比与元素实际宽度和元素在设计稿上的宽度比是一样的
即：W / w = X / x
那么 X = W * x / w
也即 X = ( W * x / w ) * ( W / 10 ) * ( 10 / W )
也即 X = x / ( w / 10) * ( W / 10 )
在上面源码处我们设定了 var rem = docEl.clientWidth / 10
也即rem = W / 10
则 X = x / ( w / 10) rem
我们已设计稿中屏幕像素为1080px计算，也就得出下面公式中 base-design-font-size = 1080 / 10 = 108
（太难了，别说高等数学了，初中数学都已经还给老师了......）

/*
*@const 根据1080p分辨率来设置比率
**/
$base-design-font-size:108px;

/*
* @Functions
* @description Strip units from $number(去掉数值后的单位)
* @param $number Include units number(含单位字符的数值)
* @return pure number(纯数字)
*/
@function __strip-units($number){
  @if type-of($number) == 'number'{
    @return $number/($number*0 +1);
  }
  @warn 'Exception in method __stip-unit : Not a number value: #{$number}';
  @return $number;
}

/*
* @Functions
* @description Convert the px to rem (将实际的设计尺寸px转为相对的rem)
* @param $origLen 设计图上的实际尺寸
* @return rem
*/
@function px2rem($origLen){
  $origLen : __strip-units($origLen);
  $base-design-font-size: __strip-units($base-design-font-size);
  @return #{$origLen/$base-design-font-size}rem;
}