我正在尝试学习响应式设计。我正在建立一个网站,其中一个网页是一个投资组合。我建立了以下如何布置此页面的模型。这当然是一个非常简洁的版本。我似乎无法应用正确的查询,因此这种格式在宽屏桌面,ipad上可以显示,并且可以说一部手机。我开始了第一个查询,但它当然不工作,也知道这是否是常见宽屏桌面的最佳尺寸。卡住此布局上媒体查询的最佳方法
任何人都可以让我开始如何应用这个页面?我将继续教程,但需要在这里启动一个开始。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style type="text/css">
@media screen and (max-width:1080px) {
#main {
width: 960px;
}
}
body {
background-color: #FFF;
margin:0;
}
#main {
width: 1080px;
margin-right: auto;
margin-left: auto;
height: 860px;
margin-top: 20px;
margin-bottom: 20px;
}
.box {
background-color: #CCC;
height: 200px;
width: 200px;
margin-right: 20px;
float: left;
margin-bottom: 20px;
}
.box_last {
background-color: #CCC;
height: 200px;
width: 200px;
float: left;
margin-bottom:20px;
}
.box_bottom {
background-color: #CCC;
height: 200px;
width: 200px;
margin-right: 20px;
float: left;
}
.box_last_bottom {
background-color: #CCC;
height: 200px;
width: 200px;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box_last"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box_last"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box_last"></div>
<div class="box_bottom"></div>
<div class="box_bottom"></div>
<div class="box_bottom"></div>
<div class="box_bottom"></div>
<div class="box_last_bottom"></div>
</div>
</body>
</html>
我觉得共同在外面使用负利润最DIV,使内div可以有正边距(让它们之间有间距),但是没有空间用于第一个/最后一个元素。如果你愿意,我可以更好地解释。 – Kubee