移动端网页实现（用百分比进行定位）

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

移动端网页实现（用百分比进行定位）,布布扣,bubuko.com