码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2014-07-27 23:25:59      阅读:414      评论:0      收藏:0      [点我收藏+]

标签:android   style   blog   color   os   io   for   cti   

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

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

标签:android   style   blog   color   os   io   for   cti   

原文地址:http://www.cnblogs.com/heyy/p/3871977.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!