html rem布局，在移动端超级好用,自适应效果非常好！

时间：2015-05-26 18:43:07 阅读：1017 评论：0 收藏：0 [点我收藏+]

标签：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/> <!--这个是bootstrap 的css插件，在网上可以下载-->
    <style>

body{
    font-family: ‘微软雅黑‘;
    font-size: 1rem;   /*12px*/
}
.width-1,.width-2,.width-3,.width-4,.width-5,.width-6,
.width-7,.width-8,.width-9,.width-10,.width-11,.width-12,
.width-13,.width-14,.width-15,.width-16,.width-17,.width-18,
.width-19,.width-20,.width-21,.width-22,.width-23,.width-24,
.width-25,.width-26,.width-27,.width-28,.width-29,.width-30,
.width-31,.width-32,.width-33,.width-34,.width-35,.width-36,
.width-37,.width-38,.width-39,.width-40,.width-41,.width-42,
.width-43,.width-44,.width-45,.width-46,.width-47,.width-48,
.width-49,.width-50,.width-51,.width-52,.width-53,.width-54,
.width-55,.width-56,.width-57,.width-58,.width-59,.width-60,
.width-61,.width-62,.width-63,.width-64,.width-65,.width-66,
.width-67,.width-68,.width-69,.width-70,.width-71,.width-72,
.width-73,.width-74,.width-75,.width-76,.width-77,.width-78,
.width-79,.width-80,.width-81,.width-82,.width-83,.width-84,
.width-85,.width-86,.width-87,.width-88,.width-89,.width-90,
.width-91,.width-92,.width-93,.width-94,.width-95,.width-96,
.width-97,.width-98,.width-99,.width-100{
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 5px;
    padding-right: 5px;
}
.width-1{
    width:1%;
}

.width-2{
    width:2%;
}

.width-3{
    width:3%;
}

.width-4{
    width:4%;
}

.width-5{
    width:5%;
}

.width-6{
    width:6%;
}

.width-7{
    width:7%;
}

.width-8{
    width:8%;
}

.width-9{
    width:9%;
}

.width-10{
    width:10%;
}

.width-11{
    width:11%;
}

.width-12{
    width:12%;
}

.width-13{
    width:13%;
}

.width-14{
    width:14%;
}

.width-15{
    width:15%;
}

.width-16{
    width:16%;
}

.width-17{
    width:17%;
}

.width-18{
    width:18%;
}

.width-19{
    width:19%;
}

.width-20{
    width:20%;
}

.width-21{
    width:21%;
}

.width-22{
    width:22%;
}

.width-23{
    width:23%;
}

.width-24{
    width:24%;
}

.width-25{
    width:25%;
}

.width-26{
    width:26%;
}

.width-27{
    width:27%;
}

.width-28{
    width:28%;
}

.width-29{
    width:29%;
}

.width-30{
    width:30%;
}

.width-31{
    width:31%;
}

.width-32{
    width:32%;
}

.width-33{
    width:33%;
}

.width-34{
    width:34%;
}

.width-35{
    width:35%;
}

.width-36{
    width:36%;
}

.width-37{
    width:37%;
}

.width-38{
    width:38%;
}

.width-39{
    width:39%;
}

.width-40{
    width:40%;
}

.width-41{
    width:41%;
}

.width-42{
    width:42%;
}

.width-43{
    width:43%;
}

.width-44{
    width:44%;
}

.width-45{
    width:45%;
}

.width-46{
    width:46%;
}

.width-47{
    width:47%;
}

.width-48{
    width:48%;
}

.width-49{
    width:49%;
}

.width-50{
    width:50%;
}

.width-51{
    width:51%;
}

.width-52{
    width:52%;
}

.width-53{
    width:53%;
}

.width-54{
    width:54%;
}

.width-55{
    width:55%;
}

.width-56{
    width:56%;
}

.width-57{
    width:57%;
}

.width-58{
    width:58%;
}

.width-59{
    width:59%;
}

.width-60{
    width:60%;
}

.width-61{
    width:61%;
}

.width-62{
    width:62%;
}

.width-63{
    width:63%;
}

.width-64{
    width:64%;
}

.width-65{
    width:65%;
}

.width-66{
    width:66%;
}

.width-67{
    width:67%;
}

.width-68{
    width:68%;
}

.width-69{
    width:69%;
}

.width-70{
    width:70%;
}

.width-71{
    width:71%;
}

.width-72{
    width:72%;
}

.width-73{
    width:73%;
}

.width-74{
    width:74%;
}

.width-75{
    width:75%;
}

.width-76{
    width:76%;
}

.width-77{
    width:77%;
}

.width-78{
    width:78%;
}

.width-79{
    width:79%;
}

.width-80{
    width:80%;
}

.width-81{
    width:81%;
}

.width-82{
    width:82%;
}

.width-83{
    width:83%;
}

.width-84{
    width:84%;
}

.width-85{
    width:85%;
}

.width-86{
    width:86%;
}

.width-87{
    width:87%;
}

.width-88{
    width:88%;
}

.width-89{
    width:89%;
}

.width-90{
    width:90%;
}

.width-91{
    width:91%;
}

.width-92{
    width:92%;
}

.width-93{
    width:93%;
}

.width-94{
    width:94%;
}

.width-95{
    width:95%;
}

.width-96{
    width:96%;
}

.width-97{
    width:97%;
}

.width-98{
    width:98%;
}

.width-99{
    width:99%;
}

.width-100{
    width:100%;
}
.eventCover{
    height: 11rem;
    background:url("../img/6.jpg");
    background-size: cover;
    background-position-y:50%;
    position: relative;
    opacity: 0;
}
.changeCover{
    width: 15%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 1rem;
}
.gather{
    font-size: 0.65rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    border-top:1px solid #E0E0E0 ;
    opacity: 0;
}
.inputStyle{
    width: 95%;
    height: 100%;
    border: none;
    padding-top:0.25rem;
    padding-bottom:0.25rem;
    outline: none;
}
.gatherLine{
    height: 0.9rem;
    background: #eeeeee;
    border-top:1px solid #E0E0E0 ;
}
.border-Bottom{
    border-bottom: 1px solid #E0E0E0;
}
.border-Left{
    border-left:1px solid #E0E0E0 ;
}
.box{
    border-bottom: 1px solid #E0E0E0;
    border-top:1px solid #E0E0E0 ;
    padding: 0.8rem;
    padding-bottom: 0;
   height: 6.9rem;
    transition: all 0.3s linear;
}
.edit{
    opacity: 0;
}
.edit >.width-50{
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-left: 1px solid #E0E0E0;
}
.font-box{
    border-radius: 0.4rem;
    border: 1px solid #E0E0E0;
    background: #ececec;
    margin-bottom: 0.8rem;
    opacity: 0;
    height: 5rem;
    transition: all 0.1s linear;
    position: relative;
}
.font-box textarea{
    border: none;
    width: 100%;
    resize: none;
    outline: none;
    padding: 0.5rem;
    height: 100%;
    background: #ececec;
    font-size: 0.7rem;
    border-radius: 0.4rem;
}
.gatherLineTwo{
    height: 1.8rem;
    background: #eeeeee;
}
.block{
    transition: all  0.2s linear;
    opacity: 1;
}
.none{
    opacity: 0;
}
.bmtj{
    font-size: 0.8rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: #999;
}
.paddingOne{
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
.content{
    display: block;
}

.wc{
    background: #E0E0E0;

}
.wc1{
    padding-top: 1.8rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1rem;
}
.wcBtn{
    width: 100%;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    background: #30B3F7;
    border: none;
    border-radius:0.2rem;
    font-size: 1rem;
    color: #ffffff;
}
.warn{
    font-size: 0.7rem;
    color: #888;
}
.del{
    height: 1.3rem;
    width: 1.3rem;
    position: absolute;
    right: 0.1rem;
    top: -0.8rem;
}


    </style>
    <script src="js/jquery1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script> <!--这个是bootstrap 的js插件，在网上可以下载-->
    <script src="js/jgestures.js"></script> <!--这个是jquery的手势插件，在网上可以下载-->
</head>
<body>
   <!--头部封面-->
    <header>
        <div class="container-fluid">
            <div class="row eventCover">
               <div class="changeCover">
                   <img width="100%" src="img/ghfm.png" />
               </div>
            </div>
        </div>
    </header>
   <!--中部内容-->
    <content class="content">
        <div class="container-fluid">
            <div class="row gather">
                <div class="width-15 text-center">
                    <img width="55%" src="img/hd.png" />
                </div>
                <div class="width-85">
                    <input class="inputStyle" type="text" placeholder="活动主题"/>
                </div>
            </div>
            <div class="row gatherLine"></div>
            <div class="row gather">
                <div class="width-15 text-center">
                    <img width="55%" src="img/sj.png" />
                </div>
                <div class="width-85">
                    <input class="inputStyle" type="text" placeholder="活动时间"/>
                </div>
            </div>
            <div class="row gather">
                <div class="width-15 text-center">
                    <img width="55%" src="img/dd.png" />
                </div>
                <div class="width-85">
                    <input class="inputStyle" type="text" placeholder="活动地点"/>
                </div>
            </div>
            <div class="row gatherLine borderbottom"></div>
        </div>
    </content>
   <!--编辑部分-->
   <main>
       <div class="container-fluid">
           <div class="row box">
               <div class="width-100 font-box">
                   <textarea rows="5" placeholder="请输入文字..."></textarea>
                   <div class="del">
                       <img width="100%" src="img/delete.png" />
                   </div>
               </div>
           </div>
           <div class="row edit text-center border-Bottom">
               <div class="width-50 tjwzk">
                   <img width="30%" src="img/tjdl.png" />
               </div>
               <div class="width-50">
                   <img width="30%" src="img/tjtp.png" />
               </div>
           </div>
           <div class="row gatherLineTwo"></div>
           <div class="row bmtj">
               <div class="width-15 text-center"><img width="65%" src="img/cilun.png" /></div>
               <div class="width-70 paddingOne">设置报名条件</div>
               <div class="width-15 text-center"><img width="65%" src="img/djgg.png" /></div>
           </div>
       </div>
   </main>
   <footer>
       <div class="container-fluid">
           <div class="row wc">
               <div class="width-100 wc1">
                   <button class="wcBtn">完成</button>
               </div>
               <div class="width-100 wc2">
                   <p class="warn text-center">亲：你必须知道，在这里我们拒绝一切违法活动</p>
               </div>
           </div>
       </div>
   </footer>
    <script>

$(function(){
    (function(debug){
        var fun=new Function();
            fun.prototype={
                getResize:function(){
                    var docWidth = document.documentElement.clientWidth;
                    var html = document.querySelector(‘html‘);
                    html.style.fontSize = (docWidth / 20) + "px";
                },
                addClass:function(obj,className,callback,setTime){
                    var that=this;
                    if(arguments[2]){
                       this.callback=callback;
                    }else{
                        if (debug)alert(‘缺少callback回调参数‘);
                    };
                    if(arguments[0]){
                        obj.addClass(className);
                        setTimeout(function(){
                           callback(that)
                        },setTime*1000)
                    }else{
                        if (debug)alert(‘缺少obj参数‘);
                    };
                },
                removeClass:function(obj,className,callback,setTime){
                    var that=this;
                    if(arguments[2]){
                        this.callback=callback;
                    }else{
                        if (debug)alert(‘缺少callback回调参数‘);
                    };
                    if(arguments[0]){
                        obj.removeClass(className);
                        setTimeout(function(){
                            callback(that)
                        },setTime*1000)
                    }else{
                        if (debug)alert(‘缺少obj参数‘);
                    };
                }
            };
        window.fun=function(){
            return new fun();
        };
    })(false);

       var gather=fun();
      //适应屏幕
       gather.getResize();
       $(window).resize(function(){
           gather.getResize();
       });
      //显示页面元素
     gather.addClass($(‘.eventCover‘),‘block‘,function(){
         gather.addClass($(‘.gather‘),‘block‘,function(){
             gather.addClass($(‘.font-box‘),‘block‘,function(){
                 gather.addClass($(‘.edit‘),‘block‘,function(){
                 },0.3)
             },0.3)
         },0.3)
     },0.3)
    var guid=0;
    $(‘.tjwzk‘).on(‘tapone‘,function(){
        if(guid==0){
            guid=1;
            var wzhp=‘<div class="width-100 font-box">‘ +
                ‘<textarea rows="5" placeholder="请输入文字..."></textarea>‘ +
                 ‘<div class="del">‘+
                 ‘<img width="100%" src="img/delete.png" />‘+
                 ‘</div>‘
                 ‘</div>‘;
                 $(‘.box‘).css({
                    height:parseFloat($(‘.box‘).css(‘height‘).split(‘px‘)[0])+5.8*parseFloat($(‘html‘).css(‘font-size‘).split(‘px‘)[0])
                 });
                setTimeout(function(){
                     $(‘.box‘).append(wzhp);
                     setTimeout(function(){
                         $(‘.font-box:last-child‘).addClass(‘block‘)
                     },1)
                     guid=0;
                },500)
             };
        })

    //    var range = 50;
    //    var elemt = 500;
    //    var maxnum = 10000;
    //    var num = 1;
    //    var totalheight = 0;
    //$(window).on(‘swipemove‘,function(a,b){
    //    var  direction=b.description.split(":");
    //         direction= direction[ direction.length-1];
    //    if( direction=="up"){
    //        var srollPos = $(window).scrollTop(),
    //            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
    //        if(($(document).height()-range) <= totalheight  && num != maxnum) {
    //            console.log(‘加载数据‘)
    //            num++;
    //           };
    //        };
    //});

});

   </script>
</body>
</html>

html rem布局，在移动端超级好用,自适应效果非常好！

标签：

原文地址：http://www.cnblogs.com/ghost12/p/4531183.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行