css - 使拼贴页面完全响应的最佳方式？

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%;
  }