使页面拼贴完全响应的最佳方法是什么？

Question

我有像登陆页面那样的拼贴画......就像这样：

此页面上的每个对象都是一个单独的图像 - 包裹在绝对定位的div中。

现在我的目标是让这个页面完全响应。实现这一目标的最佳方法是什么？

Answer 1

对于这样的布局，我将缩放绝对位置百分比，缩放图像百分比的宽度加上使用负百分比边距（等于百分比宽度的一半）使图像以其绝对位置为中心。还使用百分比字体大小。如果你这样做，我认为整个事情应该或多或少地像一个图像那样扩展。然后，您可以谨慎地使用媒体查询来隐藏内容，或者在必要时在断点处使布局不同。

以下是一个例子：

  #collage-item {
    top: 20.3%;
    left: 34%;
    width: 2.1%;
    height: 1.89%;
    margin-left: -1.05%;
    margin-top: -0.945%;
    font-size: 50%;
  }

Answer 2

你最好的选择可能是看看一些CSS框架，以帮助你实现这一点，2春天的想法

1）Twitter Bootstrap
2）Zurb Foundation

虽然还有很多其他我喜欢这两个，因为它们很容易定制。