關於移動端頁面的適配

移動端頁面：

       適配，適應各個不一樣的設備，若是是純粹的移動端頁面的話不用去考慮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