首页 > 代码库 > 移动端网页实现(用百分比进行定位)
移动端网页实现(用百分比进行定位)
HTML代码:
<div class="wrap"> <div id="bg"> <div id="title"> <a href="#" class="return">返回</a> </div> <a href="#" class="ios">ios下载</a> <a href="#" class="android">Android下载</a> </div></div>
CSS代码(reset):
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,figure {padding:0;margin:0;}fieldset,img{border:0;}:focus {outline:0;}address,caption,cite,code,dfn,em,th,var,optgroup {font-style:normal;font-weight:normal;}h1,h2,h3,h4,h5,h6 {font-size:100%;}abbr,acronym {border:0;font-variant:normal;}input,button,textarea,select,optgroup,option {font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}code,kbd,samp,tt {font-size:100%;}body {line-height:1.5;}ol,ul,li {list-style:none;}table {border-collapse:collapse;border-spacing:0;}caption,th {text-align:left;}sup,sub {font-size:100%;vertical-align:baseline;}blockquote,q {quotes:none;}blockquote:before,blockquote:after,q:before,q:after {content:‘‘;content:none;}.clear:after{clear: both;content:‘.‘;display: block;visibility:hidden;height:0;}.clear{zoom:1; clear: both;}.hide {display:none;}section,div,img,a{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent;/* For some Androids */}input{-webkit-appearance:none;}
CSS代码(百分比定位):
.wrap{position:relative;}#bg{background:url(../images/bg.jpg) no-repeat center bottom;background-size:100%;}#title{ width:100%; height:7%;}a{ text-indent:-9999px; display:block;}.return{width:16%;height:100%; float:right;}.ios{ width:100%; height:15%; margin-top:93%;}.android{ width:100%; height:15%;}
JS代码(根据设备屏幕的大小,来确定背景图片显示的大小):
$(function(){ var sicWinfill = function(para){ var win = $(para.win||window); var obj = { target : $(para.target), width : parseInt(para.width) || 0, height : parseInt(para.height) || 0, mode : (para.mode || "contain").toLowerCase(), onResize : para.onResize }; $(window).resize(function(){ var ratioW = win.width()/obj.width, ratioH = win.height()/obj.height, ratioMax = Math.max(ratioW,ratioH), ratioMin = Math.min(ratioW,ratioH), ratioMain = Math.min(ratioMin/parseInt(0+obj.mode)*100, ratioMax); var ratio = { "width" : ratioW, "height" : ratioH, "cover" : ratioMax, "contain" : ratioMin }[obj.mode] || ratioMain; obj.target.css({width:parseInt(ratio*obj.width), height:parseInt(ratio*obj.height)}); if(obj.onResize) obj.onResize(); }).resize();} sicWinfill({ target:"#bg", width:640, height:1074, mode:"width" }); })
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。