移动端适配方案1

第一种移动端的适配

var designWidth=750;//ui稿纸的大小
var fontSize=100;先在设计稿取100px,然后计算在真正的屏幕上显示多少px
function fontsize(){
    var relWidth=document.documentElement.clientWidth;//获得屏幕实际大小
    if(relWidth<320){
        relWidth=320;//小于320的按320适配
    }else if(relWidth>640){
        relWidth=640;//大于640的按640的适配
    }
    var relfontSize=fontSize*relWidth/designWidth;//计算100px在真正的屏幕上显示多少px
    document.getElementsByTagName("html")[0].style.fontSize=relfontSize+"px";
}
fontsize();
window.onresize=fontsize;
//1rem等于稿纸的100px，问宽70是多少rem?那不就是70/100rem
//然后之后在实际的用,用测量的高度100/100=1rem.  宽 高 字体 margin padding 都可以使用。

第二种移动动端的适配
1.假设稿纸640,分为20份,每一份32px.
2.新建一个adapter.css,内容如下。

@media only screen and (width: 320px) {//分为20分，html是一份的大小
    html {
        font-size: 16px;
    }
}

@media only screen and (width: 360px) {
    html {
        font-size: 18px;
    }
}

@media only screen and (width: 375px) {
    html {
        font-size: 18.75px;
    }
}

@media only screen and (width: 400px) {
    html {
        font-size: 20px;
    }
}

@media only screen and (width: 414px) {
    html {
        font-size: 20.7px;
    }
}

@media only screen and (min-width: 640px) {
    html {
        font-size: 32px;
    }
}

3。真正使用的时候。如果宽测量出来是100px,那么就用100/32rem.
解释：100/32得到占稿纸多少份，也就是占实际屏幕多少份。