移动端适配

Js适配方案：

function resizeFun() {
    if (screen.width < 500) {
        screenState = 'portrait'
        if (document.body != null) {
            document.body.className = 'portrait'
        }
    } else {
        screenState = 'landscape'
        if (document.body != null) {
            document.body.className = 'landscape'
        }
    }
    $('body').removeClass('hightscreen shortscreen portrait')
    var ratio = $(window).width() / $(window).height()
    if (screenState == 'portrait') {
        $('body').addClass('portrait');
        if (ratio > .65) {
            $('body').addClass('shortscreen')
        } else if (ratio < .56) {
            $('body').addClass('hightscreen')
        }
    }else{
        $('body').addClass('landscape')
        if (ratio > 2.2) {
            $('body').addClass('hightscreen')
        }
        if(ratio >2.85){
            $('body').addClass('superhigh')
        }
    }
}
resizeFun()
window.addEventListener('resize', resizeFun, false)

Css适配方案：

/*第一步：判断是否为IOS，需区别开来*/
/*第二步：采用屏幕比例进行适配*/
@media screen and (min-aspect-ratio: 7/11){

}
@media screen and (max-aspect-ratio: 375/710){

}
@media screen and (min-aspect-ratio: 12/7){
/*html,body{position:relative;overflow:hidden;width:100%;height:100%;padding:0;margin:0;}*/
  /*body{height: 100% !important;}*/
}

横竖屏判断：

@media screen and (orientation: portrait){
    /*竖屏*/
}
@media screen and (orientation: landscape){
    /*横屏*/
}

注：通常还会通过外层添加div盒子结合百分比（或使用rem）进行适配