前端之移动端

视口viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
viewport :虚拟窗口大小
width: 控制viewport大小 可以自己设定值如320px(很少用) 一般设置为device-width(设备宽度)
initial-scale 初始缩放比例 即页面初次加载时的缩放比例默认为1
maximum-scale：用户可缩放到的最大比例

设备物理像素

一个物理像素是显示器(手机屏幕)上最小的物理显示单元

设备独立像素

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素，在这里可以理解为我们说的视觉视口的大小；

所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系
dpr = 设备物理像素/设备独立像素

iphone3G 设备物理像素320个点 设备独立像素320px 那么dpr就是1
iphone6 设备物理像素750个点 设备独立像素375px 那么dpr就是2
根据dpr我们就可以灵活的在移动端缩放页面比例
可以通过window.devicePixelRatio来获取dpr

实战：

1.通过js适配不同的屏幕大小

 (function() {
     var docEl = document.documentElement,
              resizeEvt = 'onorientationchange' in window ? 'orientationchange' : 'resize',
              recalc = function() {
                      var clientWidth = docEl.clientWidth;
                      if(!clientWidth) return;
                      if(clientWidth >= 600) {
                              docEl.style.fontSize = '100px';
                      } else {
                              docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
                      }
              };
      window.addEventListener(resizeEvt, recalc, false);
      document.addEventListener('DOMContentLoaded', recalc, false);
})();

2、根据dpr动态计算rem

1、获取设备dpr
2、算出缩放比例 scale = 1/dpr
3、创建meta以及属性
4、将scale值赋给initial-scale，maximum-scale
5、meta插入到文档中
6、创建屏幕大小改变重新计算函数并监听

(function (doc, win) {
    console.log("dpr:"+win.devicePixelRatio); 
    var docEle = doc.documentElement,
    isIos = navigator.userAgent.match(/iphone|ipod|ipad/gi),
    dpr=Math.min(win.devicePixelRatio, 3);
    scale = 1 / dpr,

    resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
    docEle.dataset.dpr = dpr;

    var metaEle = doc.createElement('meta');
    metaEle.name = 'viewport';
    metaEle.content = 'initial-scale=' + scale + ',maximum-scale=' + scale;
    docEle.firstElementChild.appendChild(metaEle);
 
    var recalCulate = function  {
        var width = docEle.clientWidth;
        if (width / dpr > 640) {
            width = 640 * dpr;
        }
        docEle.style.fontSize = 20 * (width / 750) + 'px';
    };

    recalCulate
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvent, recalCulate, false);
})(document, window);

3、使用sass，作用：编写函数动态将px转换为rem,方便开发

 定义函数
	@function px2rem( $px ){
	    @return $px*750/$designWidth/100 + rem;
	}
	
使用：
	@import 'px2rem.scss';
	$designWidth : 750; //如设计图是750
	.banner{width:px2rem(300)}//如设计稿上的banner是300px 就免去计算环节

4、使用媒体查询，作用：不同分辨率下动态调整布局

/*当页面的宽度在900px ~ 1200px之间的时候*/
@media screen and (min-width: 900px) and (max-width: 1200px){
    .group{
        width: 900px;
    }
}
/*当页面的宽度在600px ~ 900px之间的时候*/
@media screen and (min-width:600px) and (max-width: 900px){
    .group{
        width: 600px;
    }
}