谈一谈移动端网页适配的方法

移动端适配

做移动端web需要适配市面上n多屏幕大小机型，怎么来最好保证我们的网页在各个屏幕大小的机型能呈现给用户视觉上最好的效果呢？这里就涉及到适配相关知识

原始处理除2px

  这种适配方式就是设计稿为640或750，拿过来直接除以2，单位用px，这种每个机型基本呈现一样的效果，优点方便快捷，缺点不够美观，不能100%还原设计师要求设计稿的那样；

rem

  rem也就是动态设置网页的font-size，css单位用rem来根据不同分辨率屏幕智能缩放，用如下代码

 (function (doc, win) {    
 //手机横屏、缩放
  var docEl = doc.documentElement,    
  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',    
  recalc = function () {    
      var clientWidth = docEl.clientWidth;    
      if (!clientWidth) return;    
      docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';    
  };    
  if (!doc.addEventListener) return;    
  win.addEventListener(resizeEvt, recalc, false);    
  doc.addEventListener('DOMContentLoaded', recalc, false);    
})(document, window);

  这个js一定要放head里面尽早执行，尽早改变font-size,不然会看到页面错乱效果，还可以加下面这段css保证，用户不会看到错乱效果，或者加个loading动画

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

  分辨率不会精确到那么细，一个大概值吧～这种在视觉上基本接近设计师要求，但是有缺点是字体方面，或者栏栅tab要求固定不缩放，并且大屏幕上不可能看到的字体跟小屏幕上的一样多吧，那买大屏还有用？所以目前业界流行的布局方式是手淘flexible.js这个方案

flexible.js

github
  根据屏幕宽(document.documentElement.getBoundingClientRect().width)、dpr来动态设置font-size、dpr、meta标签(缩放比),css写的话根据dpr来设置字体、宽度等的大小，less、sass写个函数或者mixin方便换算，或者直接写一个插件在打包的时候换算，用这套方案遇到的问题就是，可能安卓机的分辨率太多了，所以我们这边安卓机一律dpr设置为1，还有针对我们自己的app webview在iphone6下的缩放比不能直接为0.5改为0.52（导致app返回方法实效），这些是我们在实践的时候遇到的问题。

vw vh

  css3的新单位vw vh 这个直接根据屏幕宽高来写单位，不需要引入第三方的东西，感觉还不错，但是目前市面上的支持情况不乐观，也就没采用了，待日后市场机型更成熟了可用0.0～