移动端开发根据html的字体大小来设置布局

来源：互联网发布：数据库如何自动生成id 编辑：程序博客网时间：2024/05/21 02:53

链接：http://dhc.0lx.net/jfxt/index.html

html：

<!DOCTYPE html> <html lang='zh-cn' id='HfontSize'> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <title>首页</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <script src="jq/wap.js"></script></head> </head> <body> <div class=" head top"> <p class="ad1">当前积分:500</p> <span><ahref="#">[注销]</a></span> <p>账号账号找</p> </div> <div class="ad"><imgsrc="images/ad.png"width="100%"><ahref="#">立即兑换></a></div> <div class="contt"> <div class="conttL"><ahref="#"><imgsrc="images/shop1.png"width="100%"></a></div> <div class="conttR"> <div class="conttR1"><ahref="#"><imgsrc="images/jifen2.png"width="100%"></a></div> <div class="conttR2"><ahref="#"><imgsrc="images/person1.png"width="100%"></a></div> </div> </div> <div class="line jl"></div> <div class="sm"> <p>积分说明： </p> <span>微信积分系统内部测试开启。</span> <span>点击“获取积分”轻松获取积分，积分可以兑换话费。</span> <span>奖品数量有限，赶快积攒积分换取吧！</span> </div> <div class="footer"></div> </body> </html> js：

var fixScreen=(function(){var viewW,nRem=document.querySelector('html');function setWidth(num){function fixBind(){viewW=window.innerWidth;viewW>num?viewW=num:viewW=window.innerWidth;nRem.style.fontSize=viewW/16+'px';}window.addEventListener('load',fixBind);window.addEventListener('resize',fixBind);}return{setWidth:setWidth}})()fixScreen.setWidth(720)

css：

@charset "utf-8";/* CSS Document */html{ background:#f7f7f7;}body{margin:0px auto; width:16rem; padding:0px; font-family:"微软雅黑"; position:relative; }div{ position:relative;}ul,li,dl,dd,dt,p,b,form{ padding:0px; margin:0px; list-style:none;}.img{ border:none;}.cl{ clear:both;}/* 首页 */.head{ height:1.333rem!important;}.head p{ float:right;line-height:1.333rem; color:#ffffff; font-size:0.556rem;}.head p.ad1{ margin-right:1.2rem;}.head span{ float:right; display:block; margin:0 0.8rem 0 0.5rem;}.head span a{ text-decoration:none; display:block; color:#990617; font-size:0.556rem; line-height:1.333rem;}.ad{ width:16rem; height:8rem;  margin:1rem auto; position:relative;}.ad img{width:16rem; height:8rem; display:block;  }.ad a{ width:4.178rem; height:1.111rem; line-height:1.111rem; display:block; color:#ffffff; font-size:0.556rem; background:#166188; text-decoration:none; text-align:center; position:absolute; left:1.333rem; top:5.778rem; z-index:33}.contt{ width:15.244rem; margin:0 auto; overflow:hidden;}.conttL{ float:left; width:7.311rem; height:5.333rem;}.conttR{ float:right;}.conttR1{ width:7.556rem; height:3rem;}.conttR2{width:7.556rem; height:1.956rem; margin-top:0.4rem; }.sm{ width:14rem; margin:0rem 0 0.5rem 1.333rem; }.sm p{ font-size:0.778rem; color:#595757; text-align:left; line-height:2rem;}.sm span{ font-size:0.556rem; color:#898989; display:block; line-height:0.8rem;}.footer{ height:1.782rem; background:url(../images/fbg.png) repeat-x;  /* width: 16rem;position:absolute; bottom: 0rem;*/ }/* 个人中心 *//* 头部 */.top{width:100%; height:6rem; background:url(../images/bg.png) no-repeat center top;background-size: cover;}.topF{  width:2.578rem; height:2.578rem; border-radius:2.578rem;  margin:0 auto 0rem; padding-top:0.711rem;}.topN{   width:16rem; margin-top:0.2rem;}.topN p{ color:#FFF; font-size:0.778rem; text-align:center;}.topN p:first-child{margin-right:-1.556rem;}.topN p:first-child span{position: relative;top:-0.111rem; left:0.445rem;}.topN p span{ color:#990617; font-size:0.556rem; }.topN p span a{color:#990617; text-decoration:none;}.topN p.p1{color:#FFF; font-size:0.667rem;margin-top:0.2rem;}.topN p.p1 span{ padding:0 0.1rem; line-height:0.667rem;color:#FFF; font-size:0.667rem; }/* 导航 */.nav{ margin:0.778rem 0.5rem 0.889rem 0.5rem; }.nav li{ width:5rem; float:left;}.nav li a{ display:block; text-align:center; text-decoration:none;}.nav li a img{ width:2.222rem; height:2.222rem; display:block; margin:0 auto;}.nav li a span{ color:#595757;font-size:0.556rem;padding:0.1rem 0; }/* 栏目 */.column li{ height:2.133rem; border-top:1px solid #bebab7;  background:#ffffff;} .column li:hover{ background:#eeeeee;}.column li a{ display:block;}.column li a span{height:2.133rem;line-height:2.133rem; float:left; text-indent:0.3rem; color:#595757; font-size:0.778rem; }.column li a span img{ width:1.222rem; height:1.444rem; margin:0.4rem 0 0.4rem 1.378rem; float:left;}.column li a b img{ width:0.511rem; height:0.956rem; margin:0.589rem 1.378rem 0.4rem 0; float:right;}.col{ margin-top:0.889rem;}.colu{ border-bottom:1px solid #bebab7;}/* 退出 */.out{ margin:0.889rem 0;height:2.133rem; border-top:1px solid #bebab7; border-bottom:1px solid #bebab7; background:#ffffff;}.out a{ color:#595757; font-size:0.778rem; line-height:2.133rem; text-align:center; text-decoration:none; display:block;}/* 个人中心-密码管理 *//* 个人中心-个人信息 */.grxx{ height:2.133rem; border-bottom:1px solid #bebab7; background:#ffffff;}.gr{ margin-top:0.889rem; border-top:1px solid #bebab7;}.grxx p{ color:#595757; font-size:0.778rem;line-height:2.133rem; text-align:left; margin-left:1.378rem; float:left;}.grxx input{display:block; width:11rem;height:1.7rem;color:#000;margin-left:1rem; float:left; border:none; outline:none; font-size:0.667rem; font-family:"微软雅黑";}.grxx .inp{display:block; width:2.867rem;height:1.222rem; color:#bebab7;margin-left:1rem; margin-top:0.5rem; float:left; border:1px solid #bebab7; background:none; font-size:0.667rem; font-family:"微软雅黑";}.grxx .inp:focus{ border:1px solid #fb811e;}/* 个人中心-积分记录 */.jfjl{ width:16rem; margin:0 auto; overflow:hidden;}.jfjl p{ width:5.333rem; float:left; color:#fb811e; font-size:0.778rem; line-height:2rem;}.jfjl span{ width:5.333rem; float:left; display:block; color:#595757; font-size:0.667rem; text-align:center; line-height:1.5rem;}.jl{ width:13.244rem; margin:0 auto 0.5rem; }.jlL{ border-top:1px solid #bebab7; }/* 个人中心-兑换记录 */.jfjl span b{ font-size:0.556rem; line-height:0.8rem; font-weight:normal; display:block;}.jfjl span b a{ text-decoration:none; color:#3580fc; font-size:0.556rem;}/* 获取积分 */.topR p.p2{ width:5.933rem; height:1.177rem; border-radius:0.5rem; background:#ffffff;margin-top:0.2rem;}.topR p.p2 span{ color:#fb811e; float:left;font-size:0.667rem;line-height:1.177rem;text-indent:0.2rem}.topR p.p2 span img{ float:left; width:0.7111rem; height:0.8222rem; margin:0.1774rem 0 0.1744rem 0.4rem;}/* 栏目 */.columnH li{height:3.956rem; border-top:1px solid #bebab7;  border-bottom:1px solid #bebab7;  background:#ffffff; margin-bottom:0.445rem;}.columnH li:hover{ background:#eeeeee;}.columnH li a{ display:block;height:3.956rem; text-decoration:none;}.columnH li a span{height:1.978rem;line-height:1.978rem; float:left; text-indent:0.3rem; display:block; font-size:0.778rem; }.columnH li a p{  text-align: left; margin:0 0.5rem;border-top:1px solid #bebab7;height:1.978rem;line-height:1.978rem; text-indent:2.4rem; color:#595757; font-size:0.556rem; }.columnH li a span img{ width:1.2rem; height:1.378rem; margin:0.45rem 0 0rem 1.378rem; float:left;}.columnH li a b{height:1.978rem;display:block }.columnH li a b img{ width:0.511rem; height:0.956rem; margin:0.589rem 1.378rem 0.4rem 0; float:right;}.zixun{ color:#ff80f2;}.qiandao{ color:#fb811e;}.huodong{ color:#40c2fe;}/* 获取积分—-列表 */.hqLB{padding:1.467rem 1.378rem 0 1.378rem; background:#ffffff; }.titleH{ font-size:0.778rem; color:#595757; }.timeH{ font-size:0.556rem; color:#bebab7;line-height: 1rem;display: block;}.hqLB img{ width:13.288rem; height:6.666rem; display:block; margin:0.889rem 0;} .hqLB p{ font-size:0.556rem; color:#9fa0a0; text-align:left; text-indent:1.1rem;}.line{border-bottom:1px solid #d3d4d3; margin-top:0.8222rem}.read{ height:1.511rem; border-bottom:1px solid #bebab7;background:#ffffff;}.read a{line-height:1.511rem; text-decoration:none; font-size:0.667rem; color:#595757; text-indent:1.3rem; display:block;}.read a b{ float:right;line-height:1.511rem; margin-right:1.378rem}.read a b img{width:0.5111rem; height:0.956rem; display:block; margin-top:0.25rem;}.list{ margin-top:0.889rem;}.list li{border-top:1px solid #bebab7; border-bottom:1px solid #bebab7; background:#ffffff; overflow:hidden; margin-bottom:0.889rem;}.list li a{ display:block; text-decoration:none;}.list li a .pic{ width:2.667rem; height:2.667rem; display:block; float:left; margin:0.667rem 1rem 0.667rem 1.356rem;}.list li a .tit{ width:10rem; float:left; overflow:hidden;}.list li a .tit p{ font-size:0.667rem; color:#595757; text-align:left; line-height:2rem;}.list li a .tit span{font-size:0.556rem; color:#9fa0a0; display:block;}.list li a .tit span b{ float:right; color:#bebab7; font-weight:normal; margin-right:0.5rem;}.backT{ position :fixed;  z-index:99; bottom:0.2rem; right:0.2rem;}.backT img{ width:2.222rem; height:2.289rem;}/* 积分商城 */.title{ height:1.978rem; line-height:1.978rem; color:#fb811e; font-size:0.667rem; text-indent:1.334rem; background:#ffffff;}.shop li{border-top:1px solid #bebab7;  border-bottom:1px solid #bebab7;  background:#ffffff; display:block; overflow:hidden;}.shop li:hover{ background:#eeeeee;}.shop li a{display:block; text-decoration:none;}.shop li a b{ display:block; float:left;}.shop li a b img{ width:2.667rem; height:2.667rem; margin:0.5rem 0 0 1.334rem;}.shop li a .shopR{ float:left; width:11rem; margin-left:0.5rem; }.shop li a .shopR p{ font-size:0.778rem; color:#fb811e; line-height:1.7rem; text-align:left;}.shop li a .shopR .cont{ font-size:0.556rem; color:#595757;line-height:0.7rem; margin-bottom:0.5rem;}.shop .line{border-top:none; margin-top:0;}/* 版 本 */.banB li{border-top:1px solid #bebab7; border-bottom:1px solid #bebab7; background:#ffffff; overflow:hidden; margin-bottom:0.889rem;}.banB li:hover{ background:#eeeeee;}.banB li a{ display:block; text-decoration:none;}.banB li a .pic{ width:2.644rem; height:2.644rem; display:block; float:left; margin:0.667rem 0.5rem 0.667rem 1.356rem;}.banB li a .tit{ width:10rem; float:left; overflow:hidden;}.banB li a .tit p{ font-size:0.667rem; color:#595757; text-align:left; margin-top:1rem;}.banB li a .tit span{font-size:0.445rem; color:#898989; display:block;}.banB li a  .left{ float:left;}.banB li a  .left img{width:0.5111rem; height:0.956rem; display:block; margin-top:1.5rem;}/* 奖品明细 */.mx{ margin:0 auto; width:13.288rem;}.mx img{ width:13.288rem; height:6.667rem; display:block; margin:0.889rem auto 0rem;}.mx p{ font-size:1rem; color:#595757; text-align:left; line-height:2.5rem;}.mx span{ font-size:0.556rem; color:#898989; display:block; line-height:0.8rem}.mx span b{ color:#fb811e; font-weight:normal; }/* 奖品列表 */.jplb li{margin-bottom: 0rem; border-bottom:none;}.jplb li.jpL{border-bottom: 1px solid #bebab7;}.banB li a .jp{ width:6rem;line-height:1rem;}.banB li a .jp b{color:#fb811e; font-weight:normal;font-size:0.556rem; display:block; line-height:1rem; }.banB li a .jp p{ margin-top:0.5rem;}.banB li a .jp span{ display:block; line-height:1rem;}.btnJ{ width:3.956rem; height:1.333rem; display:block; text-align:center; color:#ffffff; font-size: 0.556rem; border-radius:0.5rem; background:#fb811e; float:left; border:none; outline:none; margin-top:1.2rem; font-family:"微软雅黑";}.btnJ1{ background:#c9caca;}/* 登 陆 */.photo{ margin:0 auto;}.photo img{ width:4.089rem; height:4.089rem;  margin:2.667rem auto 1.778rem; border-radius:4.089rem; display:block;}.login{ width:14.133rem; height:2.178rem; border:1px solid #d2d2d2; border-radius:2rem; margin:0 auto 0.445rem; background:#ffffff;}.loginL img{width:1.089rem; height:1.178rem; float:left; margin:0.5rem 0 0 1rem;}.loginR{ float:left;margin-left:0.5rem;}.loginR input{ width:10rem; height:1.7rem;  border:none; outline:none; color:#bebab7; font-size:0.778rem; font-family:"微软雅黑"; }.btn{ margin:1.445rem auto 0;}.btn input{color:#ffffff; width:12.8rem; height:1.778rem; border-radius:2rem; font-size:0.778rem; font-family:"微软雅黑"; text-align:center; margin:0 auto 0.445rem;  border:none; outline:none; display:block;-webkit-appearance: none; }.btn1{ background:rgb(251,129,30); }.btn2{ background:#1cb5db;}.btn3{ background:#ff4141;}/* 注 册 */.zc{ width:11rem; height:1.7rem;  border:none; outline:none; color:#bebab7; font-size:0.778rem; font-family:"微软雅黑"; display:block; margin-left:1rem;}/* 更改页 */.gg{ margin-top:0.889rem; margin-bottom:0.889rem}.qr{ margin-top:1.933rem;}/* 领奖提示 */p{ font-size:0.889rem; color:#ff4141; text-align:center; }.ts{ margin-top:2.733rem;}.ts1{ margin:0.889rem 1.6rem 0 1.6rem; font-size:0.667rem; text-align:left;}.ljts{ margin:1.422rem 1.6rem 0 1.6rem;}.ljtsL{ width:5.978rem; height:1.778rem; display:block; float:right; background:#fb811e; color:#ffffff; text-align:center; font-family:"微软雅黑"; font-size:0.778rem; border-radius:1rem; border:none; outline:none;-webkit-appearance: none;}.ljtsR{width:5.978rem; height:1.778rem; display:block; float:left; color:#ffffff; text-align:center; font-family:"微软雅黑"; font-size:0.778rem; background:#a1a1a1; border-radius:1rem;border:none; outline:none;-webkit-appearance: none;}

0 0

移动端开发 根据html的字体大小来设置布局

移动端开发根据html的字体大小来设置布局