0

我正在尝试使用不同大小的照片网格创建一个 Pixel Perfect Responsive 页面。我想知道最好的方法是什么？我是否使用浮动列表执行此操作？浮动元素不在列表中？？

我真的不知道。下面是两张图片，显示了全宽（1200 像素）和缩小宽度（768 像素）的布局。我了解如何通过媒体查询更改容器宽度和删除元素，但我不知道如何获得我想要的外观。我使用列吗？

全宽 http://www.letsboogey.com/stackimages/1.jpg

768 宽度 http://www.letsboogey.com/stackimages/2.jpg

4

3 回答 3

2

对于1200px 的设备，您可以创建3 列li 或 div 并将图像A、G 和 H 放在第一列；中间栏的 B & C ; 第三/最后一列中的 E、F、D、I 和J。使用所需的 css 属性并根据网格布局修复图像。

对于768px 设备，最好的办法是使用CSS 属性（如 Top、Left、Right 和 Bottom）相对/绝对地定位图像。因为您不必更改 HTML 布局。

我在这里做了一个768px 布局的演示：

.wrapper {
  position: relative;
  width: 1200px;
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wrapper * {
  position: absolute;
  border: 2px solid #000;
}
.aaa {
  left: 0;
  top: 0;
  width: 598px;
  height: 700px;
}
.bbb {
  left: 600px;
  top: 0;
  width: 598px;
  height: 200px;
}
.ccc {
  left: 600px;
  top: 202px;
  width: 598px;
  height: 596px;
}
.ggg {
  left: 0;
  top: 702px;
  width: 298px;
  height: 96px;
}
.eee {
  left: 300px;
  top: 702px;
  width: 298px;
  height: 96px;
}
.ddd {
  left: 0px;
  top: 800px;
  width: 598px;
  height: 200px;
}
.iii {
  left: 600px;
  top: 800px;
  width: 298px;
  height: 200px;
}
.fff {
  left: 900px;
  top: 800px;
  width: 298px;
  height: 200px;
}
<ul class="wrapper">
  <li class="aaa">A</li>
  <li class="bbb">B</li>
  <li class="ccc">C</li>
  <li class="ggg">G</li>
  <li class="eee">E</li>
  <li class="ddd">D</li>
  <li class="iii">I</li>
  <li class="fff">F</li>
</ul>

于 2014-11-15T21:55:32.807 回答
0

你可以使用这个生成器：https ://www.entomic.com/responsivecss ，这是一个很好的响应式设计网站

于 2014-11-15T20:09:25.253 回答
0

我建议你看看这个：http ://susy.oddbird.net/

这是一种“网格系统”，您可以在其中设计自己的网格，而无需为网格的样式添加太多额外的标记。这些类不需要创建行、网格、浮点数等。

我曾经为一个小项目尝试过它，老实说，我喜欢使用 Compass 等 CSS 创作工具时获得的强大功能和不同的开发思维方式。

于 2014-11-15T20:49:17.950 回答