關於移動端頁面的適配

標籤：viewport   ipad   比例      樣式   簡單   網頁   20px   html   

移動端頁面：

       適配，適應各個不同的裝置，如果是純粹的移動端頁面的話不用去考慮ipad,PC。

       瀏覽器，（朋友圈），QQ(內建瀏覽器)，UC

       小米，華為會有部分相容問題。

響應式：

　　　必須共用一套html結構，樣式不同而已，通過裝置的解析度來自動去轉場樣式

　　　只適用於簡單頁面：部落格，新聞，簡單的公司入口網站；

 

viewport 一般預設手機網頁採用980px的寬，不設viewport就預設980；

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalabel=0">

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;

}

 

關於移動端頁面的適配