前景提要
以下内容根据部分文章参考 自己实践得出的猜想和总结 有错误请指正
一·概念介绍
css单位：px ，rem，em（没用过），pt，vw，%
viewport说明：参考这个
物理像素：理解成分别率
设备独立像素（css像素或者说dip）：由一个或多个物理像素组成的虚拟点也是开发中设置的点 比如width：1px设置的就是这个
ppi:每英寸含有的物理像素 （300以上人肉眼看不到点）
dpr：物理像素/设备独立像素 每个移动设备都有自己的dpr （打开chrome切换到移动模式也能看到对应的dpr，window.devicePixelRatio能直接获取该值）
metaviewprot：设置布局viewport<meta name="viewprot" content="width=360">
二：理论
正常一个pc端一个页面移植到手机端可以看到页面内容很小比如一个
这里我没有设置相应的viewport可以看到内容很小 还有个现象layoutviewPort宽是980而不是真机的1080分辨率（有些手机默认有可能是800 也有别的 大部分是980），即html的宽度980
添加一个metaviewport
ps:真机设备分辨率1080*1920 dip是360
分别是
-
<meta name="viewport" content="width=160,user-scalable=0">
4.png
2.<meta name="viewport" content="width=360,user-scalable=0">
3.<meta name="viewport" content="width=1080,user-scalable=0">
4.<meta name="viewport" content="width=device-width,user-scalable=0">
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是一致）。
<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=0">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta name="viewport" content="width=device-width,initial-scale=2,user-scalable=0">
其实这里很好理解 要initial-scale=0.5就是缩小2倍 ，还是那个画画的白纸（layoutviewportviewport）想象下你要缩小2倍自然要把白纸在原来合适的位置(白纸=360的时候，注意这里跟你设的width=device-width没关系)，然后一边远离一边放大720视觉上,这样缩小后白纸的大小跟你设置width=720就是一样的，
有一点要注意 这里initial-scale计算出的白纸大小和width=xx白纸大小会取这里的大值。
比如
<meta name="viewport" content="width=400,initial-scale=1,user-scalable=0">
设备独立像素（dip）=360 initial-scale=1算出的layoutviewport=360 但是width=400所以最后layoutviewport就是400
有了以上的结论再来看看minimum-scale ，maximum-scale
这么说吧initial-scale minimum-scale 以这里大的为准
initial-scale maximum-scale以这里小的值为准,
其实这个很好理解，就是最小要放大多少倍和最多放大多少倍的概念。
再来理解下
<meta name="viewport" content="width=640,initial-scale=0.5,minimum-scale=0.5,maximum-scale=2,,user-scalable=0">
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
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
这里设置这个后layoutviewport=320 即html width=320
那一个css像素就是2*2 4倍的物理像素。
三：实战
3.1<meta name="viewport" content="width=device-width,initial-scale=1">
布局用百分比 flex 定宽来决定（适合一些只有简单的列表信息和详情信息的） 这样的方案简单 不过在一些大高清屏上会有大的差异化
3.2 固定宽 并用px布局
setViewport(640)
function setViewport(uiWidth) {
if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
scal=window.screen.width/uiWidth;
document.write('<meta name="viewport" content="width='+uiWidth+',initial-scale='+scal+', user-scalable=no">');
}else{
document.write('<meta name="viewport" content="width=640,user-scalable=no">');
}
}
字体大小和布局大小完全按照设计稿来，还是大屏的看上去差异化比较大
可以试试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
