zoukankan      html  css  js  c++  java
  • 移动端网页实现(用百分比进行定位)

    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({parseInt(ratio*obj.width), height:parseInt(ratio*obj.height)});
            if(obj.onResize) obj.onResize();
        }).resize();
    }
        sicWinfill({
            target:"#bg",
            640,
            height:1074,
            mode:"width"
        });
        })
  • 相关阅读:
    基本概念和术语
    Html中的<label>标签
    shell17echo打印带颜色的文字
    shell-15 &的三种不同
    shell-14 多个命令以分号隔开
    shell-13 tee管道可以重定向但是不截流
    shell-12实用cat完成文件复制
    shell-11输入内容到文件
    shell-10kill杀死作业号和进程号
    shell-9前后台切换
  • 原文地址:https://www.cnblogs.com/heyy/p/3871977.html
Copyright © 2011-2022 走看看