最大化等比例测试演化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) 页面在窗口中的显示是 ...
随机推荐
- thinkphp5.0--编写api,返回json格式
前几天没有写php代码,今天写了一下,今天的任务主要是构建自己的异常体系类,出现一个问题,就是返回结果不是json格式,而是一个页面,我找了一两个小时,没有找到问题,以为代码的问题,用断点调试了一通, ...
- C#中简单操作SQLserver数据库（ADO.NET的简单应用）
本篇文章以 ADO.NET 访问SQL SERVER 数据库为例, 其中需用System.Data.SqlClient; 数据库连接字符串写法为:server=数据源(服务器名称);uid=用户名;p ...
- Linux报错之ping: www.baidu.com: Name or service not known
Linux报错之ping: www.baidu.com: Name or service not known 出现这个以后,首先去ping下主机Ip,发现能ping通,但是出现另一个问题Destina ...
- eikonal equation - 程函方程
[转载请注明出处]http://www.cnblogs.com/mashiqi 2018/08/08 eikonal equation如下:$$|\nabla_x \tau (x)| = n(x).$ ...
- Spock - Document - 03 - Data Driven Testing
Data Driven Testing Peter Niederwieser, The Spock Framework TeamVersion 1.1 Oftentimes, it is useful ...
- AOP统一处理Web请求日志
<!--aop--> <dependency> <groupId>org.springframework.boot</groupId> <arti ...
- 数据库关闭，shutdown三种语句。
1.shutdown normal 正常方式关闭数据库. 2.shutdown immediate 立即方式关闭数据库. 在SVRMGRL中执行shutdown immedia ...
- 2017 cinemachine
只有2017以上才可以使用~ 导入Asset store中的cinemachine,会在上方显示cinemachine.每创建一个虚拟摄像机,就会在主摄像机下创建组件 cinemachine Bra ...
- system.net.httpclient 4.0 vs2015
// 加入Cookie foreach (string a in cookieStr.Split(';')) { cookieContainer.Add(new Cookie(a.Split('=') ...
- supervisor支持python虚拟环境venv
在项目中使用supervisor时,如何在虚拟环境下启动一直存在些小问题. 比如我要写 Cesi程序的监听,我是手动安装的执行之前 要先加载环境source venv/bin/activate 所以写 ...