使用DIV堆叠的响应式Web布局的更好工作流程
我要求在页面上的一个乐队中放置2个图像，然后使其响应各种屏幕尺寸。因此，a和b下方将代表这些图像，而红色的波段则代表这些图像。 a和b之间的间隙需要保持与a和b的比例宽度略有不同，因为A是圆形徽标，b是矩形徽标。
所以我通过移动各种屏幕尺寸并根据我使用媒体查询看到的手动调整css来实现它：
<html>
<head>
<title>Welcome</title>
<meta name="description" content="T">
<meta name="keywords" content="">
<meta name="author" content="">
<meta http-equiv="cleartype" content="on">
<!-- Responsive and mobile friendly stuff -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html,body {
color:#ffffff;
margin:0px;
padding:0px;
background: url('images/bg-1366.jpg') no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
#band{
position: relative;
top:27.5%;
height:30%;
width:100%;
max-width: 100%;
border:3px solid #ffffff;
border-right-style:none;
border-left-style:none;
margin:0px;
align:center;
padding:0px;
background-color: #000000;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
#holistic {
float:right;
max-width: 80%;
max-height: 80%;
}
#spa {
float:left;
max-width: 90%;
max-height: 90%;
}
#off {
float:left;
max-width: 1%;
max-height: 1%;
}
</style>
<link rel="stylesheet" href="css/col.css" media="all">
<link rel="stylesheet" href="css/3acols.css" media="all">
<link rel="stylesheet" href="css/media.css" media="all">
</head>
<body>
<div id="band">
<div id="wrapper">
<div class="section group">
<div class="col span_1_of_2">
<img id="holistic" src="Ehlogo.png">
</div>
<div class="col coloff span_3_of_2">
<img id="off" src="images/off.png">
</div>
<div class="col span_1_of_2">
<img id="spa" src="ESlogo.png">
</div>
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
@media only screen and (min-width : 320px) and (max-width : 480px) {
.col{
text-align:center;
}
#holistic {
float: none;
max-width: 95%;
max-height: 95%;
}
#spa {
float:right;
max-width: 95%;
max-height: 95%;
margin-top:7.5%;
margin-right:10%;
}
#band {
top:12.5%;
height:30%;
}
}
@media only screen and (min-width : 480px) and (max-width : 640px) and (max-height : 960px){
.col{
text-align:center;
width:640px;
max-width: 100%;
max-height: 100%;
}
#holistic {
float: none;
max-width: 85%;
max-height: 85%;
}
#spa {
float:right;
max-width: 85%;
max-height: 85%;
margin-top:7.5%;
margin-right:10%;
}
#band {
top:12.5%;
height:30%;
}
}
@media only screen and (max-width : 480px) and (max-height : 800px){
.col{
text-align:center;
}
#holistic {
float: none;
max-width: 95%;
max-height: 95%;
}
#spa {
float:none;
max-width: 95%;
max-height: 95%;
margin-right:10%;
}
}
@media only screen and (min-width : 640px) and (max-width : 768px) and (max-height : 1280px){
.col{
text-align:center;
width:768px;
max-width: 100%;
max-height: 100%;
}
#holistic {
float: none;
max-width: 100%;
max-height: 100%;
}
#spa {
float:none;
max-width: 100%;
max-height: 100%;
margin-top:3.5%;
margin-right:3%;
}
#band {
top:12.5%;
height:25%;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1280px) {
body{
background: url('images/bg-1280.jpg') no-repeat center center fixed;
}
#holistic {
position:relative;
top:-5px;
left:10px;
max-width: 90%;
max-height: 90%;
}
.coloff {
width:75px;
}
#spa {
float:right;
margin-top:2%;
margin-right:15%;
max-width: 85%;
max-height: 85%;
}
}
@media only screen and (min-width: 1250px) and (max-width: 1366px) and (min-height: 1024px) {
body{
background: url('images/bg-1280.jpg') no-repeat center center fixed;
}
#holistic {
max-width: 90%;
max-height: 90%;
}
.coloff {
width:75px;
}
#spa {
float:right;
margin-top:2%;
margin-right:15%;
max-width: 85%;
max-height: 85%;
}
#band {
top:25%;
height:32.5%;
}
}
@media only screen and (min-width: 1280px) and (max-width: 1366px) and (max-height: 799px){
body{
background: url('images/bg-1366.jpg') no-repeat center center fixed;
}
#holistic {
position:relative;
top:-16px;
max-width: 100%;
max-height: 100%;
}
#spa {
max-width: 90%;
max-height: 90%;
}
.coloff {
width:165px;
}
#band {
top:25%;
height:32.5%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1279px) and (max-height: 799px){
body{
background: url('images/bg-1366.jpg') no-repeat center center fixed;
}
#holistic {
max-width: 95%;
max-height: 90%;
}
#spa {
float:left;
max-width: 85%;
max-height: 85%;
}
.coloff {
width:175px;
}
#band {
top:25%;
height:32.5%;
}
}
@media only screen and (min-width: 1580px) and (max-width: 1920px){
body{
background: url('images/bg-1366.jpg') no-repeat center center fixed;
}
#holistic {
max-width: 90%;
max-height: 90%;
}
#spa {
float:left;
max-width: 90%;
max-height: 90%;
}
.coloff {
width:180px;
}
#band {
top:25%;
height:28.5%;
}
}
@media only screen and (min-width: 1920px) and (max-width: 2400px){
body{
background: url('images/bg-1366.jpg') no-repeat center center fixed;
}
#holistic {
position:relative;
top:-10px;
max-width: 90%;
max-height: 90%;
}
#spa {
margin-top:0.5%;
float:left;
max-width: 86%;
max-height: 86%;
}
.coloff {
width:200px;
}
#band {
top:25%;
height:30%;
}
}
/* SECTIONS ============================================================================= */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* GROUPING ============================================================================= */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
/* GRID COLUMN SETUP ==================================================================== */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
/* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
/* GRID OF TWO ============================================================================= */
.span_2_of_2 {
width: 100%;
}
.span_3_of_2 {
width: 10%;
}
.span_1_of_2 {
width: 40.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 100%;
}
}
我的问题是，这是彻底的痛苦。这是很多猜测并输入％值/保存文件/重新加载浏览器以查看其外观/再次调整等等。尔加！
所以我正在寻找一种方法来使用数学或框架或一些工作流程算法来加快速度，并从中完成所有猜测工作。我的方法纯粹是业余时间，但到目前为止，我无法在使用百分比和媒体查询时找到更好的方法。这花了我太久了。
1 个答案:
答案 0 :(得分：1)
先移动手机！这是咒语的原因。编写css以使其在较小的屏幕尺寸上看起来很好，然后覆盖较大的尺寸会更容易。
从您的捕捉点开始，相当小，在您获得自己喜欢的样式后，调整浏览器的大小，让您的眼睛决定捕捉点应该在哪里。让内容决定风格。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？