移动端适配总结

前景提要
以下内容根据部分文章参考 自己实践得出的猜想和总结 有错误请指正
一·概念介绍
css单位：px ，rem，em（没用过），pt，vw，%
viewport说明：参考这个
物理像素：理解成分别率
设备独立像素（css像素或者说dip）：由一个或多个物理像素组成的虚拟点也是开发中设置的点 比如width：1px设置的就是这个
ppi:每英寸含有的物理像素 （300以上人肉眼看不到点）
dpr：物理像素/设备独立像素 每个移动设备都有自己的dpr （打开chrome切换到移动模式也能看到对应的dpr，window.devicePixelRatio能直接获取该值）
metaviewprot：设置布局viewport
二：理论
正常一个pc端一个页面移植到手机端可以看到页面内容很小比如一个

1.png

这里我没有设置相应的viewport可以看到内容很小 还有个现象layoutviewPort宽是980而不是真机的1080分辨率（有些手机默认有可能是800 也有别的 大部分是980），即html的宽度980

添加一个metaviewport
ps:真机设备分辨率1080*1920 dip是360
分别是

1. 
   
   

   4.png

2.

3.png

3.

2.png

4.
width=device-width把layoutviewport定义跟视觉窗口一样大（即设备的可视窗口这里是360pt）不上图了...

这个实例对比可以看到没设置viewport的时候viewport的默认值是980 可以看到document.documentElement.clientWidth=980(layoutviewport 也有人叫他视口 的宽度 很多手机默认都是980)
设置了相应的width后对应的html改变了, device-width就是设备独立像素（dip360）
而且width越小看到内容越大就好像被放大了一样。

这里我是这么去想象的：
有那边一张白纸是layoutviewport（=布局窗口=html的宽度） ，你可以在白纸上画画 ，手机框（就想象成一个空壳的框）(=视觉窗口 你通过这个窗口去看那个白纸上的内容）
假设就是有一个980宽的白纸 然后你手上有个360宽的壳,一开始你透过壳可以看到整个白纸（但是字很小像图2.png）把纸改成360大小，这样你必须拿着手上的壳离这个白纸越来越近直到2个完全重合（想象下这样白纸上面的看到的东西是不是越来越大）这个时候相当于设了width=device-width或者width=360，甚至你可以改的更小 然后再靠近直到你框的宽度又跟他重合，字也是越来越大（注意这里html的with跟viewport width是一致）。

5.png

6.png

7.png

其实这里很好理解 要initial-scale=0.5就是缩小2倍 ，还是那个画画的白纸（layoutviewportviewport）想象下你要缩小2倍自然要把白纸在原来合适的位置(白纸=360的时候，注意这里跟你设的width=device-width没关系)，然后一边远离一边放大720视觉上,这样缩小后白纸的大小跟你设置width=720就是一样的，
有一点要注意 这里initial-scale计算出的白纸大小和width=xx白纸大小会取这里的大值。
比如

设备独立像素（dip）=360 initial-scale=1算出的layoutviewport=360 但是width=400所以最后layoutviewport就是400

有了以上的结论再来看看minimum-scale ，maximum-scale
这么说吧initial-scale minimum-scale 以这里大的为准
initial-scale maximum-scale以这里小的值为准,
其实这个很好理解，就是最小要放大多少倍和最多放大多少倍的概念。
再来理解下

scale=0.5不比0.5小也没比2大 所以合理（假设这里的device-width=320）
那我们以320再缩小2倍的视角去看（即layoutviewport=640的角度去看）width设了640 所以我们看到的应该是一个以白纸=640角度去看并且html的width=640的一个layout白纸。
那我们自己设置的css像素到底是什么呢。
请以上面的html with为准
以iphone5为准（1136x640）dpr=2 设备独立像素是dip=320

这里设置这个后layoutviewport=320 即html width=320
那一个css像素就是2*2 4倍的物理像素。
三：实战
3.1
布局用百分比 flex 定宽来决定（适合一些只有简单的列表信息和详情信息的） 这样的方案简单 不过在一些大高清屏上会有大的差异化
3.2 固定宽 并用px布局

  setViewport(640)
function setViewport(uiWidth) {
    if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
        scal=window.screen.width/uiWidth;
        document.write('');

    }else{
        document.write('');
    }
    
}

字体大小和布局大小完全按照设计稿来，还是大屏的看上去差异化比较大
可以试试nexus 10的
3.3使用rem

!function(n, e) {
    var t = n.documentElement,
        i = "orientationchange" in window ? "orientationchange" : "resize",
        d = function() {
         document.querySelector("html").setAttribute("data-dpr",window.devicePixelRatio)    ;
            var n = t.clientWidth;//dip
            var uiWidth=640;
            var scal=n/uiWidth;
            if (n) {
                var e = n;
                if(n>640 || n==640){
                    t.style.fontSize = '100px';
                    }else{
                    t.style.fontSize = 100 * (n / 640) + 'px';
                    }
                var htmlWidth=document.documentElement.offsetWidth;
                var allrem=1;
                document.getElementById("remw").innerHTML="width="+allrem+"rem (html font-size "+t.style.fontSize+"  htmlWidth "+htmlWidth+"   )";
                document.getElementById("remw").style.width=allrem+"rem";
            }
        };
    n.addEventListener && (e.addEventListener(i, d, !1), n.addEventListener("DOMContentLoaded", d, !1))
}(document, window); 

这里1rem等100px 6.4rem等于整个宽

然后布局按设计稿来（问题是设计稿中每个px你都要自己转 应该有插件的吧 没找过知道的支个声 ）
3.4使用flex 请看下面文章
手淘适配
3.5使用vw
vw没有实践过 具体看下
大漠老师的文章
postcss-px2viewport
postcss-px-to-viewport
postcss-viewport-units
viewport-units-buggyfill