移动端页面：
适配，适应各个不同的设备，如果是纯粹的移动端页面的话不用去考虑ipad,PC。
浏览器，微信（朋友圈），QQ(内置浏览器)，UC
小米，华为会有部分兼容问题。
响应式：
必须共享一套html结构，样式不同而已，通过设备的分辨率来自动去切换样式
只适用于简单页面：博客，新闻，简单的公司门户；
viewport 一般默认手机网页采用980px的宽，不设viewport就默认980；
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalabel=0">
公司要求兼容各个设备的话：rem和百分比方式来配合着来使用
兼容主流机型：缩放视窗来形式
640和750 正常切
1242 6plus 做的3倍图
1125 iphone6 做的3倍图
960 iphone5的3倍
rem适配：
640（iphone5的320） 750（根据iphone 6） 1000+（iphonePlus）
如果可视区的尺寸比640（页面大小）要大 页面只显示640
如果小的话，会按照一个比例来缩小
40 — HTML的font-size
640/40 16 分成16份每个格最大40
750
50 — HTML的font-size
750/50 15 分成15份每个格最大50
<script>
（function setSize（）{
var _html=document.getElementsByTagName('html')[0];
var ch=document.documentElement.clientWidth; //可视区的宽度
if(ch>640){ //这里是按设计图640，当然也可改成750
_html.style.fontSize='40px'; //当750时候也要改成50px
}
else{
_html.style.fontSize=ch/16+'px'; //通过可视区宽度来改变HTML中font-size的大小，如320(html的font-size：20px) 这里的16也要改15
}
window.onresize=setSize; //横竖屏幕切换
}）();
</script>
例如：
html{
font-size:40px // 1rem =40px
}
.box{
width:7.5rem; // width:300px/40px 如640的图里一个logo的宽度 为300px
height:7.5rem;
}
Viewport适配：
<meta name="viewport" content="width=640,initial-scale=0.5,user-scalabel=0"> // 这里的width可以根据设计图改变
手机屏幕尺寸：
iphone5 320 0.5 初始缩放比例 屏幕的尺寸/设计图的尺寸 320/640
iphone6 375 375/640
