最大化等比例测试演化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) 页面在窗口中的显示是 ...
随机推荐
- JAVA乐观锁、悲观锁实现
一.名词解释 1.悲观锁:认为每次对数据库的操作(查询.修改)都是不安全的,因此每次操作都会把这条数据锁掉,直到本次操作完毕释放该锁 2.乐观锁:查询数据的时候总是认为是安全的,不会锁数据:等到更新数 ...
- HOMEWORK1
回顾你过去将近3年的学习经历 当初你报考的时候是真正喜欢计算机这个专业吗? 当初报考的时候是选择英语和计算机专业,报英语那个学校没去上,就来学了计算机,对计算机专业的感觉介于喜欢和热爱之间,就是说还是 ...
- 2019南昌邀请赛 L 计算几何 G(待补)
#include<bits/stdc++.h> const double PI=acos(-1.0); ; using namespace std; struct Point { doub ...
- 2019年4月zstu月赛A: 我不会做
问题 A: 我不会做 时间限制: 1 Sec 内存限制: 128 MB 题目描述 众所周知,duxing201606就是plw. 然而已经9102年了,plw仍旧没有npy.plw非常难过,于是他打 ...
- SOFARPC —— SPI 解析
一.前言 我之前研究过微博的Motan框架(当时接触的第一个RPC框架),当时懵懵懂懂,现在,上手SOFARPC框架,感觉比较轻松,事物的本质都是相通的.以前写博文,会逐行分析源码,慢慢地发现,源码其 ...
- layui基本使用
https://www.layui.com/doc/ 在线实例https://www.layui.com/demo/ 使用 自己实际操作 <script> layui.use(['laye ...
- MySQL 数据表操作
MySQL 数据表操作 创建MySQL数据表需要以下信息: -表名: -表字段名: -定义每个表字段: 一.创建数据表 1)mysql> create table table_name (c ...
- 修改Docker默认的网段
背景 一同事在研究他的安全大业,需要在AWS服务器上部署他的秘密武器,秘密武器通过Docker来部署:在部署前可以通过跳板机的内外网ssh登录上这台服务器:部署后只能通过外网ssh登录这台服务器... ...
- layer.open弹出窗口后在子页面修改弹窗的title
在子页面修改layer.open弹窗的title,代码如下: var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索 ...
- 解决STM32 I2C接口死锁在BUSY状态的方法讨论
关于STM32的I2C接口死锁在BUSY状态无法恢复的现象,网上已有很多讨论,看早几年比较老的贴子,有人提到复位MCU也无法恢复.只有断电才行的状况,那可是相当严重的问题.类似复位也无法恢复的情况是存 ...