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

<!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>

时间： 2024-11-26 01:40:38

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

移动端rem布局雪碧图解决方案以及分享腾讯团队的在线雪碧图工具

先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖进去后自己调) 然后点击右边绿色的make按钮即可点击后,上面的选项会高亮,提示你制作好了, 点击PNG选项即可下载制作好的雪碧图, 点击css选项即可查看每个小图标在雪碧图中对应的x和Y位置对于PC端来说,基本就完成了. 对于移动端采用rem布局的,则需要多一些步骤: 首先将对应的x和y位置转

一看就懂得移动端rem布局、rem如何换算

这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题. 1.如何进行rem运算? 2.如果纯js控制根元素用rem布局会出现的小问题,如何解决? 3.如有欠缺的地方,大神们可以指出错误或者改进. function intiSize(){ //获取当前浏览器窗口宽度(这里的实质就是body宽度) var win_w=document.body.offsetWidth; //定义变量 var fontSize; if(win_w>640){ fontSi

移动端rem布局和百分比栅格化布局

移动端的rem: 使用方法: 设置html的font-size,根据浏览器分辨率缩放设置根元素font-size为100px这样好用的值,不要设为10px这样的: 然后获取浏览器的分辨率,也就是视口宽度,p(比例尺)= 视口宽度/效果图宽度根元素font-size=100px*p 然后来个resize去跟随浏览器大小变化 1(function (win){ 7 var doc = win.document, 8 html = doc.documentElement, 9 option = h

移动端rem布局背景图片使用以及sprite雪碧图

现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片. rem布局所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写.比如将<html>的字体设为100px,如果需要做一个100*200的元素,css如是写: div{ width: 1rem; height: 2rem; } 那么最终

第130天：移动端-rem布局

一.关于布局方案当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案.不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用. 网易云的方案总结为:根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等,动态调节html的font-size大小. 淘宝的方案总结为:根据设备设备像素比设置scale的值,保

移动端rem布局的学习（基于一个网易云播放页面的思考）

对于一个前端的初学者来说,首先要做好的事就是切页面了,切页面不得不说的就是布局了,布局的重要性不言而喻,为了良好的用户体验,提出了许多不一样的布局:响应式布局,弹性布局,流动布局等等,也流入出了许多的框架.最近在看关于移动端的响应式布局,其中涉及到比较多的就是大小属性的设置:px.vw.vh.%.em.rem等等,今天自己就捋一捋rem的用法. 说在前面一想到写移动端的页面,就要考虑自己写的页面能够适应各种不同的移动设备,起初想想要做到感觉好难啊,最初想到的就是用第三方的框架,用别人写的东西应

移动端页面rem布局的关键点。

移动端页面布局的关键点. 第一.rem布局: 1,必须写 <meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compa

细说移动端经典的REM布局与新秀VW布局

和以往一样,本次项目也放到了 Github 中,欢迎围观 star ~ 1. 前言 2. 基本概念 3. REM布局 4. VW布局实现单边边框1px 实现多边边框1px 实现边框圆角实现容器固定纵横比 5. REM + VW布局 6. 对比选择方案选择食用方式一.前言说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,Flex布局,Column布局,Grid布局等等. 而另一方面,还有一些布局概念: 1. 静态布局直

移动端Rem布局注意事项

1.布局的总体结构框架: 2.注意事项: (a):如果是左右两栏的布局方式,须在article的同级加一个aside: 因为是同级,所以必须设置同样的样式:而且他俩的父级,也就是section必须转化为弹性盒子,(因为元素在弹性盒子里面可以在一行排列), 哪一个需要固定宽度就给他设置固定宽度,另外一个只需设置flex=1即可: 此外还需解决高度塌陷问题,将他们俩都设置 “overflow=auto //一定是auto//不能是hidden或者其他.” (b):常规一栏的布局,只需按部