先上效果
HTML：
<div id="_centent"> <header> <div class="rt-bk"> <i class="bk"></i> <p>返回</p> </div> <div class="top-name"> <p>个人中心</p> </div> </header> <div class="head"> <div class="head-img"> <img src="img/head-img.png"> </div> <div class="head-dsb"> <p class="dsb-name">--凌乱</p> <p class="dsb-id">ID 1271543621</p> </div> </div> <div class="nav"> <ul> <li> <i class="idt"></i> <p>订单</p> </li> <li class="pt-line"> <i class="clt"></i> <p>收藏</p> </li> <li> <i class="rcm"></i> <p>推荐</p> </li> </ul> </div> <section class="mt-1"> <div class="ps-lt"> <div class="lt-dsb"> <p>修改个人资料</p> <i class="arr-right"></i> </div> <div class="lt-dsb cl-bb"> <p>修改密码</p> <i class="arr-right"></i> </div> </div> </section> <section class="mt-2"> <div class="ps-lt"> <div class="lt-dsb cl-bb"> <p>声音推送通知</p> <i class="check-on"></i> </div> </div> </section> <section class="mt-3"> <div class="ps-lt"> <div class="lt-dsb"> <p>猜你喜欢</p> <i class="arr-right"></i> </div> </div> <div class="ps-lt"> <div class="lt-dsb"> <p>附近热门</p> <i class="arr-right"></i> </div> </div> <div class="ps-lt"> <div class="lt-dsb"> <p>推荐商家</p> <i class="arr-right"></i> </div> </div> <div class="ps-lt"> <div class="lt-dsb cl-bb"> <p>设置</p> <i class="arr-right"></i> </div> </div> </section> <div class="jg"></div> </div> <footer> <div class="mune"> <img src="img/1.png"> <p>首页</p> </div> <div class="mune"> <img src="img/2.png"> <p>商家</p> </div> <div class="mune"> <img src="img/3.png"> <p>申请加盟</p> </div> <div class="mune"> <img src="img/4.png"> <p>个人中心</p> </div> </footer>
移动端适配JS
<script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script>
CSS 代码：
body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input{ margin:0; padding:0;} html { width: 100%; font-family: 'Heiti SC', 'Microsoft YaHei'; font-size: 100px; outline: 0; -webkit-text-size-adjust:none;} body { width:100%; margin: 0; -webkit-user-select: none; position: relative; background-color:#efeff4;} @font-face { /* font-properties */ font-family: pictos; src:url(../font/myfont.TTC), url(../font/myfont.TTC), url(../font/myfont.TTC); /* IE9 */ } .font-face{ font-family: pictos; } @font-face { /* font-properties */ font-family: my-font; src: url(../font/myfont.TTC); } .font-face2{ font-family: my-font; color: green; } a:hover,a:link,a:visited,a{ color:inherit; text-decoration:none;} ul,li{list-style:none} #_centent{ padding-bottom:0.8rem;;} header{ position:relative; width: 7.5rem; height: 0.84rem; border-bottom:1px solid #d4d4d8; background-color: #fff;} .rt-bk{ position:absolute; top:0.27rem; left:0.15rem; float:left;} .rt-bk p{ float:left; font-size:0.24rem;} .bk{display: block; margin:0.045rem 0.25rem 0 0; float:left; width: 0.15rem; height: 0.24rem; background: url(../img/rt-bk.png) no-repeat; background-size: 0.15rem 0.24rem;} .top-name{ text-align:center; font-size:0.34rem; line-height:0.84rem;} .head{ position:relative; width:7.5rem; height:2.2rem; margin-top:0.29rem; background:url(../img/%E7%BB%84%2025.png) no-repeat; background-size:7.5rem 2.2rem;} .head-img{ position:absolute; top:0.35rem; left:0.62rem; width:1.43rem; height:1.43rem; padding:0.04rem; border-radius:1rem; background-color:#fff;} .head-img img{ width:1.43rem; height:1.43rem;} .head-dsb{ position:absolute; top:0.85rem; left:2.78rem;} .head-dsb p{ font-size:0.28rem; color:#fff;} .dsb-id{ margin-top:0.08rem;} .nav{ width:7.5rem; height:0.72rem; margin-top:0.26rem; background-color:#fff;} .nav ul li{ position:relative; float:left; width:2.48rem; height:0.55rem; font-size:0.3rem; margin-top:0.085rem; line-height:0.55rem; text-align:center;} .nav ul li p{ position:absolute; left:1.2rem; width:0.7rem;} .pt-line{ border-left:1px solid #dddddd; border-right:1px solid #dddddd; } .idt{ display:block; position:absolute; top:0.11rem; left:0.68rem; float:left; width:0.28rem; height:0.36rem; background:url(../img/indent.png) no-repeat; background-size:0.28rem 0.36rem;} .clt{ display:block; position:absolute; top:0.11rem; left:0.68rem; float:left; width:0.39rem; height:0.35rem; background:url(../img/clt.png) no-repeat; background-size:0.39rem 0.35rem;} .rcm{ display:block; position:absolute; top:0.11rem; left:0.68rem; float:left; width:0.37rem; height:0.35rem; background:url(../img/rcm.png) no-repeat; background-size:0.37rem 0.35rem;} .ps-lt{ width:7.5rem; height:100%; background-color:#fff;} .lt-dsb{ position:relative; 7.35rem; height:0.66rem; line-height:0.66rem; margin-left:0.15rem; border-bottom:1px solid #e5e5e5;} .lt-dsb p{ margin-left:0.2rem; font-size:0.24rem; color:#838383;} .arr-right{ display:block; position:absolute; top:0.21rem; right:0.25rem; width:0.14rem; height:0.24rem; background:url(../img/arr-right.png) no-repeat; background-size:0.14rem 0.24rem;} .check-on{ display:block; position:absolute; top:0.11rem; right:0.25rem; width:0.85rem; height:0.58rem; background:url(../img/on.png) no-repeat; background-size:0.85rem 0.58rem;} .check-off{ display:block; position:absolute; top:0.11rem; right:0.25rem; width:0.85rem; height:0.58rem; background:url(../img/off.png) no-repeat; background-size:0.85rem 0.58rem;} .cl-bb{ border:none;} .mt-1{ margin-top:0.23rem;} .mt-2{ margin-top:0.38rem;} .mt-3{ margin-top:0.29rem;} .jg{ margin-bottom:0.8rem;} footer{ position:fixed;bottom:0px;left:0px; margin-top:0.2rem; width:7.5rem; height:0.99rem; background:url(../img/projection.png) repeat-x; padding-top:0.2rem; font-size:0.24rem;} .mune{ float:left; margin-left:0.54rem; width:1.2rem; height:0.7rem; text-align:center;} .mune p{ font-size:0.22rem; color:#656565;} .mune img{ width:0.5rem; height:0.5rem;}
