最大化等比例测试演化Demo-传统方法
demo-1:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>满屏等比例缩放测试</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body, #container {
width: 100%;
height: 100%;
}
#container {
background-color: #CCC;
position:relative;
}
#incontainer {
background-color: blue;
position:absolute;
width: 90%;
height: 90%;
top:5%;
left:5%;
}
#inincontainer {
background-color: red;
position:absolute;
width: 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 {
width: 100%;
height: 100%;
}
#container {
background-color: #grey; }
#incontainer {
position:relative;
width: 90%;
height: 90%;
margin-left:5%;
/*margin-right:5%;*/
top:5%;
background-color: blue;
}
#inincontainer {
position:relative;
width: 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 {
width: 100%;
height: 100%;
}
#container {
background-color: #grey; }
#incontainer {
position:relative;
width: 90%;
height: 90%;
margin-left:5%;
top:5%;
background-color: blue;
}
#inincontainer {
position:relative;
width: 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 {
width: 100%;
height: 100%;
}
#container {
background-color: #grey;
}
#incontainer {
padding:3.12% 5% 3.12% 5%;
width: 90%;
height: 90%;
background-color: blue;
}
#inincontainer {
padding:3.12% 5% 3.12% 5%;
width: 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是一个修订值.
最大化等比例测试演化Demo-传统方法的更多相关文章
- 最大化及等比例测试演化Demo-Grid方法
Demo1-简单测试: <!doctype html> <html> <head> <meta charset="utf-8"> & ...
- Selenium关键字驱动测试框架Demo（Java版）
Selenium关键字驱动测试框架Demo(Java版)http://www.docin.com/p-803493675.html
- Spring Boot超简单的测试类demo
1 概述 Spring Boot结合Junit的简单测试类demo,流程是先引入依赖,接着编写测试类测试运行即可. 2 依赖 <dependency> <groupId>org ...
- 【flask】使用配置类管理app测试环境-demo版
如果对app.config是什么还心有疑惑,或者对于这种配置方式很陌生,参考:flask项目配置 app.config classConfig.py: class BaseConfig(object) ...
- VS2017 + QT5 + C++开发环境搭建和计算器Demo测试
非常有帮助的参考资料: https://blog.csdn.net/gaojixu/article/details/82185694 该参考文献的主要流程: (1)QT下载安装:从官网下载QT,并记 ...
- y7000笔记本 darknet-yolo安装与测试（Ubuntu18.04+Cuda9.0+Cudnn7.1）
环境配置看上一贴 https://www.cnblogs.com/clemente/p/10386479.html 1 安装darknet 1-1 克隆darknet repo git clone h ...
- 使用 Swagger 自动生成 ASP.NET Core Web API 的文档、在线帮助测试文档（ASP.NET Core Web API 自动生成文档）
对于开发人员来说,构建一个消费应用程序时去了解各种各样的 API 是一个巨大的挑战.在你的 Web API 项目中使用 Swagger 的 .NET Core 封装 Swashbuckle 可以帮助你 ...
- 使用Firefox user agent进行移动端网页测试
Selenium 真是个强大的网页测试工具,设置Firefox user agent, 就可以轻松模拟手机端浏览器进行网页测试. Demo Code # -*- coding:utf8 -*- imp ...
- 关于web测试
关于web测试1页面部分(1) 页面清单是否完整(是否已经将所需要的页面全部都列出来了)(2) 页面是否显示(在不同分辨率下页面是否存在,在不同浏览器版本中页面是是否显示)(3) 页面在窗口中的显示是 ...
随机推荐
- UI中的Rect Transform
RectTransform 是 Transform 的 2D 对应 Component. Transform 表示单个点,Rect Transform 表示一个2D矩形(UI空间),如果父子物体都有R ...
- [LeetCode&Python] Problem 703. Kth Largest Element in a Stream
Design a class to find the kth largest element in a stream. Note that it is the kth largest element ...
- 百战程序员——JSP
JSP全称是什么?它相比servlet有什么优势?有什么劣势? JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计. JSP技术使用Jav ...
- javascript方法篇-String
一.String 实例方法(或非静态方法) const str = "Hello World"; toLowerCase();将英文大写字母转换成小些字母.比如: const ne ...
- 第七次实验：CC2530平台上多跳通信的TinyOS编程
module P2MM { uses interface Boot; uses interface Timer<TMilli> as Timer0; uses interface Spl ...
- laravel-阿里大于
安装扩展 # 安装curl模块apt-get install curl # 安装php5-curl扩展apt-get install php5-curl # 安装laravel阿里大鱼服务compos ...
- git push 不想把本地某个目录下文件上传的办法
- jenkins中shell脚本编写的两个注意点
在jenkins的build中,如果用shell脚本的话,要记住有两个地方要注意 1.由于默认jenkins是使用/bin/bash -xe xxx.sh来调用脚本的,所以不同于日常写的脚本,任何一行 ...
- cin.ignore
功能:函数用于输入流.它读入字符,直到已经读了num 个字符(默认为1)或是直到字符delim 被读入(默认为EOF).其调用形式为cin.ignore(n,终止字符) 原型:istrea ...
- Python 基础知识（持续更新中）
内置数据类型: 整型 浮点型 字符串 布尔值 空值 None 列表 list 元组 tuple 字典 dict 集合 set ...