关于移动端页面的适配

移动端页面：

       适配，适应各个不一样的设备，若是是纯粹的移动端页面的话不用去考虑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