最大化等比例测试演化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) 页面在窗口中的显示是 ...
随机推荐
- echarts 滚动条 缩放
// 初始化是否需要展示滚动条,与初始显示的数据数(总数据数的百分比) var isShowScroll = false;// 是否显示滚动条,默认false不显示 var dataZoom_end; ...
- vim 加密(crypt)文本文档
算法 vim7.3版本支持两种加密方式——PKzip算法(已知有缺陷的).Blowfish算法(从7.3版本开始支持).Blowfish2算法(从7.4.399版本开始支持)而vim -x 默认采用P ...
- 影响Arcmap运行效率的因素
在使用ArcMap的过程中,总觉得ArcMap运行起来非常慢,目前发现了两点原因: 一.渲染太多图斑 比较常见的,我们在打开矢量图层时,Arcmap会自动渲染加载进去的图斑,进行符号化.在渲染的过程中 ...
- UML第一次作业:UML用例图绘制
UML用例图绘制 一.plantuml用例图语法小结 1.用例 用法:用例用圆括号(),或者使用关键字来定义用例 示例1: @startuml (First UML) (Another UML)a ...
- Mysql update指定区间的数据
,) as a) Mysql 中 limit不能作为字句,所以要在limit外面再嵌套一层select
- 2018.5.24 lvm创建pool
在调试生产环境时遇到以下情况: 好奇心驱使下,发现是lvm的一个功能——lvm创建pool,就手动创建了相似的环境,操作截图如下: 主要命令: vgcreate -s 32M vg /dev/vdb1 ...
- 使用JBolt新建Maven版工程步骤
一.打开新建对话框 在左侧右键new中可以找到JFinal创建工程的菜单 JBoltHome页面也有快捷按钮用来弹出创建工程对话框. 二.填写Maven和其他信息配置 填写工程name 主包名 下面有 ...
- 使用python编辑和读取word文档
python调用word接口主要用到的模板为python-docx,基本操作官方文档有说明. python-docx官方文档地址 使用python新建一个word文档,操作就像文档里介绍的那样: fr ...
- Ubuntu系统安装Transmission
虚拟机Ubuntu 16.10 Transmission 2.92(https://launchpad.net/~transmissionbt/+archive/ubuntu/ppa) 一.添加源 s ...
- RGB颜色名称与色值对应表
实色效果 英文名称 R.G.B 16色 实色效果 英文名称 R.G.B 16色 Snow 255 250 250 #FFFAFA PaleTurquoise1 187 255 255 #BBF ...