html rem布局，在移动端超级好用,自适应效果非常好！
2015-05-26 17:36
543 查看
<!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" alt=""/> </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" alt=""/> </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" alt=""/> </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" alt=""/> </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" alt=""/> </div> </div> </div> <div class="row edit text-center border-Bottom"> <div class="width-50 tjwzk"> <img width="30%" src="img/tjdl.png" alt=""/> </div> <div class="width-50"> <img width="30%" src="img/tjtp.png" alt=""/> </div> </div> <div class="row gatherLineTwo"></div> <div class="row bmtj"> <div class="width-15 text-center"><img width="65%" src="img/cilun.png" alt=""/></div> <div class="width-70 paddingOne">设置报名条件</div> <div class="width-15 text-center"><img width="65%" src="img/djgg.png" alt=""/></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" alt=""/>'+
'</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 移动端网页 rem 自适应布局
- 移动端网页 rem 自适应布局
- 移动端的自适应rem布局
- html中的em和rem到底该如何使用，自适应效果中如何确定文字大小/字号？
- rem自适应布局-移动端自适应必备
- rem自适应布局-移动端自适应必备
- rem自适应布局-移动端自适应必备:flexible.js
- 移动端的自适应rem布局
- 移动端自适应布局----rem字体
- rem布局-－移动端页面自适应解决方案
- rem自适应布局-移动端自适应必备:flexible.js
- 移动端rem自适应布局(切图)
- 超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码
- rem自适应布局-移动端自适应必备:flexible.js
- 移动端自适应布局之-----rem单位的使用
- 【移动端】页面自适应布局—基于rem布局
- 移动端 css/html (box-flex)自适应、等比布局
- 移动端自适应布局解决方案——rem
- html前端 rem布局，完美兼容各手机端的尺寸，自适应布局
- rem自适应布局-移动端自适应必备