关于移动端页面的适配

移动端页面：

       适配，适应各个不同的设备，如果是纯粹的移动端页面的话不用去考虑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.οnresize=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

 

转载于:https://www.cnblogs.com/sxw0511/p/6618766.html