最大化等比例测试演化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) 页面在窗口中的显示是 ...
随机推荐
- JVM学习三：静态分派
所有依赖静态类型来定位方法的执行版本的分派动作成为静态分派,静态分派典型的应用场景是方法的重载.在编译阶段,javac编译器会根据参数的静态类型决定使用哪个重载版本,但很多种情况下这个版本并不是“唯一 ...
- asp。net内置委托
Action与Func是APS.NET内置委托 //--------------无返回值的委托Action--------------------------- Action是无返回值的泛型委托 Ac ...
- matlab函数每天进步一点点
1. 读mp4视频 : xyloObj = VideoReader('su35.mp4'); 链接 2. 查看有几个相同的函数和当前使用的函数是哪个路径下的: which -all xxx; w ...
- s21day23 python笔记
s21day23 python笔记 一.内容回顾及补充 字符串格式化 %s # 示例一:特别注意:最后的右括号前面必须有逗号(,) msg = '我是%s,年龄%s'%('alex',19,) # 元 ...
- 联想Y410P在Ubuntu系统下开关机及插耳机破音“啪啪”的解决办法
转载自:https://blog.csdn.net/YiKangJ/article/details/81239556 1.解决开关机“啪啪响”: options snd-hda-intel model ...
- go接口
// 接口例子package main import "fmt" type Human struct { Name string Age int Sex string Phone ...
- MySQL Workbench 创建数据库，添加新表，添加字段
建立数据库 第一步: 第二步: 第三步: 如图弹出弹框,继续点击Apply按钮,最后点击Finish按钮完成数据库的建立 创建表与添加字段 双击!!! 一下刚刚建立好的数据库,然后再创建表,不然会出 ...
- 批量镜像locator（比如表情模板）
#外挂 镜像loc 前缀 lf 镜像给 rt 选中其中一个会镜像另一个 myPrefix='lf_'myMdf='rt_' myselectLoc=mc.ls(sl=1)for ...
- Netty 线程模型
一.线程模型概述 线程模型表明了代码的执行方式.从最开始的使用单线程,后来出现了多线程,之后是线程池.当有要执行的任务时,任务会被传到线程池,从线程池中获得空闲的线程来执行任务,执行完了后会将线程返回 ...
- Java 关键字详解（持续更新中）
abstract: 表明类或者成员方法具有抽象熟悉. 修饰类,抽象类: 抽象类不能被实例化: 抽象类中可以有属性.方法.构造,都是用来给子类继承的: ...