【移动端】rem+sass适配所有移动端分辨率

众所周知，现在PC电脑和手机的分辨率是越来越多，适配也就成了需要前端这个职业一个原因，具体有那些主流的可以看下面这这篇文章：
PC-移动适配

CSS单位

说到适配，我们就想到CSS的单位：px,em,rem,vw,vh,vmin,vmax以及不常用到的ex,ch等

• px : 我们最基础的单位（像素）
• em : 相对于当前父节点字体的大小 ---- 1em = 父节点字体大小
• rem: 相对于当前根节点字体的大小 ---- 1rem = 根（html）节点字体大小
• vw: 当前视窗宽度 ---- 1vw = 1%视窗宽度
• vh: 可以理解成当前一个屏幕高度（一页高度） ---- 1vh = 1%视窗宽度
• vmin: vw和vh中较小的那个
• vmax: vw和vh中较大的那个

rem适配

这篇文章运用的是rem，也是当前适配最流行用的最多的单位。
创建一个reset.js来控制字体适配屏幕大小，这里我是以iphone 6为标准

(function flexible (window, document) {
  var docEl = document.documentElement    	//获取文档根节点
  var dpr = window.devicePixelRatio || 1     // 获取当前手机dpr值
  
  //设置1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10					// 当前视宽 / 10
    docEl.style.fontSize = rem + 'px'				   // 重置根节点字体大小
  }

  setRemUnit()

  // 在页面上重置rem单元调整大小
  window.addEventListener('resize', setRemUnit)				//绑定resize事件
  window.addEventListener('pageshow', function (e) { 		//页面进入的触发，pageshow事件在onload之后
    if (e.persisted) {
      setRemUnit()
    }
  })

  // 检测0.5px支持
  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))

SASS(css预处理)

在sass文件中写一个函数来控制 适配我们的设计稿

@function set($n) {
  @return ($n / 2) / 37.5+rem;
} 

因为设计稿是按照750*1334所以我要除以2，这样设计稿标注多少，就可以直接set(xx)就行了。

至此就可以实现适配所有移动端了，ipad的也不例外。如果有更好的适配方法，请传授给小弟我