關於移動端適配問題

標籤：整理   xib   font   簡單   doc   16px   移動   實現   idt   

移動端適配採用rem進行編寫CSS，整理了三種方案：

　　方案一：

　　　　簡單的JS適配

function resizeRoot(width){
    var deviceWidth=document.documentElement.clientWidth,
            num=width,
            num1=num/100;
    if(deviceWidth>num){
        deviceWidth=num;
    }
    document.documentElement.style.fontSize=deviceWidth/num1+"px";
}
resizeRoot(750);
window.onresize=function(){
    resizeRoot(750)
}
　　拿到750尺寸的設計圖，用PX/100即可

方法二：
　　使用Flexible.js實現H5頁面的終端適配  這是阿里開發的一款適配外掛程式
　　
　　拿到750尺寸的設計圖，用PX/75即可

方法三：
　　使用CSS檔案進行適配
　　

@media screen and (min-width:300px){html,body,input{font-size:15px}}
@media screen and (min-width:320px){html,body,input{font-size:16px}}
@media screen and (min-width:340px){html,body,input{font-size:17px}}
@media screen and (min-width:360px){html,body,input{font-size:18px}}
@media screen and (min-width:375px){html,body,input{font-size:18.75px}}
@media screen and (min-width:380px){html,body,input{font-size:19px}}
@media screen and (min-width:400px){html,body,input{font-size:20px}}
@media screen and (min-width:414px){html,body,input{font-size:20.7px}}
@media screen and (min-width:420px){html,body,input{font-size:21px}}
@media screen and (min-width:440px){html,body,input{font-size:22px}}
@media screen and (min-width:460px){html,body,input{font-size:23px}}
@media screen and (min-width:480px){html,body,input{font-size:24px}}
@media screen and (min-width:500px){html,body,input{font-size:25px}}
@media screen and (min-width:520px){html,body,input{font-size:26px}}
@media screen and (min-width:540px){html,body,input{font-size:27px}}
@media screen and (min-width:560px){html,body,input{font-size:28px}}
@media screen and (min-width:580px){html,body,input{font-size:29px}}
@media screen and (min-width:600px){html,body,input{font-size:30px}}
@media screen and (min-width:620px){html,body,input{font-size:31px}}
@media screen and (min-width:640px){html,body,input{font-size:32px}}
@media screen and (min-width:660px){html,body,input{font-size:33px}}
@media screen and (min-width:680px){html,body,input{font-size:34px}}
@media screen and (min-width:700px){html,body,input{font-size:35px}}
@media screen and (min-width:720px){html,body,input{font-size:36px}}
@media screen and (min-width:740px){html,body,input{font-size:37px}}
@media screen and (min-width:760px){html,body,input{font-size:38px}}
@media screen and (min-width:780px){html,body,input{font-size:39px}}
@media screen and (min-width:800px){html,body,input{font-size:40px}}
@media screen and (min-width:1024px){html,body,input{font-size:51.2px}}
@media screen and (min-width:1349px){html,body,input{font-size:67.45px}}

拿到750尺寸的設計圖，找到對應的尺寸（除以2後的）用PX/18.75即可

關於移動端適配問題