跪求：明明已经js动态加载了rem，为什么我的网页在ip6s和4s下还是出现结构混乱

   

   

   

   

   

   

   

   

   

   

   

   

   

   

 





   



   

@charset "utf-8";



body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{ margin:0;padding:0;}

html{font-size:100px;}

body{font-size:0.14rem;}



img{display:block;max-width:100%;}



html,body{

    width: 100%;

    height: 100%;

    overflow:hidden;

}

li{list-style: none;}

/*box-sizing:border-box;*/



.container{

    width: 6.4rem;

    height: 100%;

    position: absolute;

    left: 0;

    top: 0%;

}

.container .page{

    height: 100%;

    position: relative;

}



.container .page0{

    background:url(../img/1bg.png) no-repeat center center;background-size: 100% 100%;

    width: 100%;height: 100%;padding-top: 1.34rem;box-sizing:border-box;

}

.show_border{

    margin:0 0 0 1.4rem;width: 3.6rem;height: 4.8rem;background:url(../img/1a.png) no-repeat center center;

    background-size: 100% 100%;z-index: 1;padding-left: 1%;padding-top: 1%; box-sizing:border-box;

    margin-bottom: 3%;

}

.show{

    background:url(../img/2a.png) no-repeat center center;background-size: 100% 100%;

    width: 98%;height: 98.5%;

}

.yun{

    background:url(../img/yun.png) no-repeat center center;background-size: 100% 100%;

    width: 2rem;height: 1rem;margin:auto;

}

.name{

    width: 2.4rem;text-align: center;line-height: 1.2;margin:auto;margin-top: 2%;



}

.name_p1{

    font-size: 0.75rem;font-family: "fzxkjw";

}

.name_p2{

    font-size: 0.34rem;font-family: "方正大标宋简体";

}







.container .page1{

    background:url(../img/2bg.png) no-repeat center center;background-size: 100% 100%;width: 100%;height: 100%;

    padding-top: 24%;box-sizing:border-box;

}

.show1_border{

    margin:0 0 0 0.75rem;width: 4.06rem;height: 3.2rem;background:url(../img/3a.png) no-repeat center center;

    background-size: 100% 100%; margin-bottom: 0.2rem;padding: 0.06rem 0.08rem 0.08rem 0.08rem;box-sizing:border-box;

}

.show1{

    background:url(../img/5a.png) no-repeat center center;background-size: 100% 100%;

    width: 100%;height: 100%;

}

.show2_border{

    margin:0 0 0 0.75rem;width: 4.06rem;height: 3.2rem;background:url(../img/3a.png) no-repeat center center;

    background-size: 100% 100%;padding: 0.06rem 0.08rem 0.08rem 0.08rem;box-sizing:border-box;margin-bottom: 0.3rem;

}

.show2{

    background:url(../img/4a.png) no-repeat center center;background-size: 100% 100%;

    width: 100%;height: 100%;

}

.page1_time{position:absolute;left: 10%;bottom:30%;font-size: 0.34rem;color: #fff; }

.time{}

.page1_title{

margin:auto;

}

.page1_title2{

    margin:auto;

}







.container .page2{

    background:url(../img/3.png) no-repeat center center;background-size: 100% 100%;width: 100%;height: 100%;

   

}

.container .page3{

    background:url(../img/4.png) no-repeat center center;background-size: 100% 100%;width: 100%;height: 100%;

   

}

.container .page4{

    background-color: #f0f;

   

}





.xiangxiatishi{

    display: none;

    position: fixed;

    bottom: 20px;

    left: 50%;

    -webkit-transform:translateX(-50%);

            transform:translateX(-50%);

    -webkit-animation:dong 1s linear 0s infinite alternate;

            animation:dong 1s linear 0s infinite alternate;

}



@-webkit-keyframes dong{

    from{bottom:20px;}

    to{bottom: 60px;}

}

@keyframes dong{

    from{bottom:20px;}

    to{bottom: 60px;}

}



@font-face{

    font-family: fzxkjw;

    font-family:"方正大标宋简体";

    }

/*

@font-face {

    font-family:;

    src: url('MicrosoftYaHei.eot');

    src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'),

             url('MicrosoftYaHei.woff') format('woff'),

             url('MicrosoftYaHei.ttf')  format('truetype'),

             url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg');

   }



   */

 

.mask{background-color:#999;display:none;position:absolute;left:0;top:0;width:100%;height:100%;opacity:0.4;filter:alpha(opacity:40);z-index:50;}



.dialog_age{width:60%;height:25%;display:none;z-index:100;background-color:#FCC;position:absolute;left:20%;top:30%;}



.dialog_age ul li{text-align:center;font-size:0.2rem;background-color:#6CF;margin:1% auto;padding:0.06rem;}

$(document).ready(

    function() {

        var nowpage = 0;

        $(".container").swipe(

            {

                swipe:function(event, direction, distance, duration, fingerCount) {

                     if(direction == "up"){

                         nowpage = nowpage + 1;

                     }else if(direction == "down"){

                         nowpage = nowpage - 1;

                     }



                     if(nowpage > 3){

                         nowpage = 3;

                         

                     }



                     if(nowpage <0){

                         nowpage = 0;

                     }



                     if (nowpage == 3) {

                         $(".xiangxiatishi").css("display","none")

                     };



                    $(".container").animate({"top":nowpage * -100 + "%"},300);



                    $(".page").eq(nowpage).addClass("cur").siblings().removeClass("cur");

                }

            }

        );



        $('.page1_time').click(function (){

            $('.mask').css({display:"block"});

            $('.dialog_age').removeClass("animated fadeOutUpBig");

            $('.dialog_age').css({display:"block"}).addClass("animated fadeInDownBig");

            })

       

        $('.dialog_age ul li').on('click',function (){

            $('.time').text($(this).html());

            $('.dialog_age').removeClass("animated fadeInDownBig");

            $('.dialog_age').addClass("animated fadeOutUpBig");

            $('.mask').css({display:"none"});

        })





    }

);