首页 > 代码库 > 移动端网页实现(用百分比进行定位)

移动端网页实现(用百分比进行定位)

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"    });    })