移动端适配

介绍百分比，em，rem

• 百分比的情况比较复杂：主要分5种情况
  1. with、padding、margin、right、left相对于父元素的width。
  2. height、top、bottom相对于父元素的height。
  3. font-size相对于父元素的font-size。
  4. line-height相对于自身的font-size。
  5. border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path相对于自身宽／高
• em 表示自身字体尺寸的倍数（不是相对于父元素）
• rem Equal to the computed value of font-size on the root element.相当于根元素的计算值

适配方案

• 首先一定要加上<meta name="viewport" content="width=device-width, initial-scale=1.0">为了让页面可视宽度与手机可视宽度相同

• 我们试着让1rem=页面宽度的一半

function init (){
  var style = document.createElement('style')
  var pageWidth = document.documentElement.clientWidth;
  style.innerHTML = 'html{font-size :' + pageWidth/2 + 'px !important;}'
  document.head.appendChild(style);
}
window.onresize=function(){
  init()
}
window.onload=function(){
  init()
}

demo

这样做虽然可以将rem做成类百分比。但是，当你遇到除不尽的尺寸的时候，写起来会很麻烦。而且，如果设计稿有定高的模块的时候，你还得额外计算屏幕宽度的影响。所以这样做是很麻烦的，所以我们试着让1rem与设计稿联系起来，假设我们设计稿宽度是750。那么我们可以这样写。

function init (designWidth){
  var style = document.createElement('style')
  var pageWidth = document.documentElement.clientWidth;
  style.innerHTML = 'html{font-size :' + pageWidth/designWidth + 'px !important;}'
  document.head.appendChild(style);
}
window.onresize=function(){
  init(750)
}
window.onload=function(){
  init(750)
}

这样写就能让1rem等于设计稿的1px。但是还是会出现问题，浏览器font-size的最小单位是12px，假设你在iphone6下面开发，html的font-size为.5px但是会被强制成12px。这样你做的就是无用功了。所以我们还需要一个rem2px的变量来放大我们的font-size

//设计稿的尺寸750
//设置之后1rem=设计稿的40px
function init (desginWidth,rem2px){
    var style = document.createElement('style')
    var pageWidth = document.documentElement.clientWidth;
    style.innerHTML = 'html{font-size :' + 40*pageWidth/desginWidth + 'px !important;}'
    document.head.appendChild(style);
}
window.onload=function(){ init(750,40) }

我个人比较喜欢将rem2px设置成40，有人会好奇，为什么不是20。还是因为最小font-size的限制，如果rem2px为20在ipad下面很容易突破12px的限制。

• 到目前为止还不算完，因为rem其实是一个计算值，在 html 的 fontSize 设置为 px 的情况下1rem = 1 * (htmlFontSize / 16) * defaultFontSize一般浏览器的默认值是16，但是如果用户主动设置了defaultFontSize就会出现偏差，这种情况我们可以用百分比来绕过去。

function init (designWidth,rem2px){
    var d = window.document.createElement('div');
    d.style.width = '1rem';
    d.style.display = "none";
    var head = window.document.getElementsByTagName('head')[0];
    head.appendChild(d);
    var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
    d.remove();
  /*
    到这里是为了获得defaultFontSize系统默认字体
  */
    document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
}

这样设置在defaultFontSize为16与我们第三步没什么区别

Reference

了解真实的rem

除了上面方法

• 使用Flexible实现手淘H5页面的终端适配
  如何设置手淘的flexible也给一个类似的方案
  如何设置手淘的flexible