zoukankan      html  css  js  c++  java
  • 最大化等比例测试演化Demo-传统方法

    demo-1:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>满屏等比例缩放测试</title>
    <style type="text/css">
    * {
    	padding: 0;
    	margin: 0;
    }
    html, body, #container {
    	 100%;
    	height: 100%;
    }
    #container {
    	background-color: #CCC;
    	position:relative;
    }
    #incontainer {
    	background-color: blue;
    	position:absolute;
    	 90%;
    	height: 90%;
    	top:5%;
    	left:5%;
    }
    #inincontainer {
    	background-color: red;
    	position:absolute;
    	 90%;
    	height: 90%;
    	top:5%;
    	left:5%;
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div id="incontainer">
      <div id="inincontainer">
       </div>
       </div>
    </div>
    </body>
    </html>
    

     demo-2:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>满屏等比例缩放测试</title>
    <style type="text/css">
    * {
    	padding: 0;
    	margin: 0;
    }
    html, body, #container {
    	 100%;
    	height: 100%;
    }
    #container {
    	background-color: #grey;
    	
    }
    #incontainer {
    	position:relative;
    	 90%;
    	height: 90%;
    	margin-left:5%;
    	/*margin-right:5%;*/
    	top:5%;
    	background-color: blue;
    }
    #inincontainer {
    	position:relative;
    	 90%;
    	height: 90%;
    	margin-left:5%;
    	/*margin-right:5%;*/
    	top:5%;
    	background-color: pink;
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div id="incontainer">
      <div id="inincontainer">
       </div>
       </div>
    </div>
    </body>
    </html>
    

     demo-3:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>满屏等比例缩放测试</title>
    <style type="text/css">
    * {
    	padding: 0;
    	margin: 0;
    }
    html, body, #container {
    	 100%;
    	height: 100%;
    }
    #container {
    	background-color: #grey;
    	
    }
    #incontainer {
    	position:relative;
    	 90%;
    	height: 90%;
    	margin-left:5%;
    	top:5%;
    	background-color: blue;
    }
    #inincontainer {
    	position:relative;
    	 30%;
    	height: 30%;
    	left:50%;
    	top:50%;
    	background-color: pink;
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div id="incontainer">
      <div id="inincontainer">
       </div>
       </div>
    </div>
    </body>
    </html>
    

     demo-4:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>满屏等比例缩放测试</title>
    <style type="text/css">
    * {
    	padding: 0;
    	margin: 0;
    }
    html, body, #container {
    	 100%;
    	height: 100%;
    }
    #container {
    	background-color: #grey;	
    }
    #incontainer {
    	padding:3.12% 5% 3.12% 5%;
    	 90%;
    	height: 90%;
    	background-color: blue;
    }
    #inincontainer {
        padding:3.12% 5% 3.12% 5%;
    	 90%;
    	height: 90%;
    	background-color: pink;
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div id="incontainer">
      <div id="inincontainer">
       </div>
       </div>
    </div>
    </body>
    </html>
    

     小结:

    1.border宽度使用百分比,没有效果,故不要使用.

    2.padding-top,padding-bottom 使用百分比,以父盒子宽度为基准,所以为了达到满屏,数值需要修订.比如上述的padding值得3.12是一个修订值.

  • 相关阅读:
    设计模式之代理模式
    Java8内存模型—永久代(PermGen)和元空间(Metaspace)
    使用jconsole分析内存情况-JVM
    JVM(Java虚拟机)优化大全和案例实战
    JVM调优总结 -Xms -Xmx -Xmn -Xss
    聊聊jvm的PermGen与Metaspace
    Jconsole
    【Java VisualVM】使用 VisualVM 进行性能分析及调优
    JAVA基础(10)——IO、NIO
    JAVA基础(9)——容器(3)——并发容器
  • 原文地址:https://www.cnblogs.com/exesoft/p/10658431.html
Copyright © 2011-2022 走看看