phpstudy集成环境

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

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

在第一页，姓名刘佳和下面的英文liujia的div，在ip6s下和4s下面被挤得很厉害，明明就做了rem自适应了？为什么还是这样？
第二页在6s下面屏幕很长，可以装的下，4s下面就被挤出页面了？刚开始做，很多不懂，求指教？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chorme=1">
    <meta name="format-detection" content="telephone=no">
    <title>个人名片</title>
    <script type="text/javascript">
        !(function(doc, win) {
        var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 100 * (width / 640) + "px");
        };
        
        win.addEventListener(evt, fn, false);
        doc.addEventListener("DOMContentLoaded", fn, false);
        }(document, window));
    </script>
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    
    
 
</head>
<body onmousewheel="return false;">
    <div class="container">
        <div class="page page0">
            <div class="show_border">
                <div class="show"></div>
            </div>
            <div class="yun"></div>
            <div class="name">
                <p class="name_p1">刘佳</p>
                <p class="name_p2">liujia</p>
            </div>

        </div>

        <div class="page page1">
            <div class="show1_border">
                <div class="show1"></div>
            </div>
            <div class="show2_border">
                <div class="show2"></div>
            </div>        
            <div class="page1_time"><span class="time">1995</span>年加盟</div>
            <div class="page1_title"><img src="img/7a.png"></div>
            <div class="page1_title2"><img src="img/8a.png"></div>
        </div>

        <div class="page page2" style="font-size:0.5rem; font-family:Verdana, Geneva, sans-serif, fzxkjw">刘佳</div>
        <div class="page page3" style="font-size:0.5rem; font-family:'方正大标宋简体'">李继承</div>
        <div class="page page4"></div>
    </div>

    <img  class="xiangxiatishi" src="img/prompt.png" />

<div class="mask"></div>
<div class="dialog_age">
        <ul>
            <li>1995</li>
            <li>1996</li>
            <li>1997</li>
            <li>1998</li>
            <li>1999</li>
            <li>2000</li>
            <li>2001</li>
        </ul>
</div>

</body>
</html>
@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"});
        })


    }
);

这个或许可以帮助到你。
https://github.com/amfe/lib-flexible

你是js动态获取屏幕宽度是些什么代码？我后面也加了媒体查询。能加个qq吗？为什么我的设置文字大小不对，而且按640px的设计稿，div宽度是100px，那我就应该写1rem啊，为什么在6s上出来就不是了？

刚入前端。昨天做个移动页面也遇到4，5下布局错乱的问题，rem单位，js实时计算的。想不通为什么会乱。后来发现div在4的屏幕下的宽度容纳不了固定的文字个数。于是用媒体查询对4和5的屏幕大小专门做了CSS样式的修改，比如div宽度和div之间的边距，然后解决了。但不能完全达到45，6屏幕下UI一致。不过不影响体验。我的实际问题，供你参考下，看看是不是也是4屏幕下哪个地方宽度不够导致页面元素错位。

【热门文章】
【热门文章】