1

我不精通响应式设计，我似乎无法找到所需目标的解决方案。这是我想要的布局模型：

在此处输入图像描述

现在，目标是让图像没有间隙地适合图像网格容器。这个容器应该占据浏览器视口的最右侧和底部的全部剩余空间，但它不会超过它，所以我们没有任何滚动条。所有图像的尺寸相同。

行列分布将取决于视口大小和图像尺寸，以防止不必要的失真。当视口大小达到特定断点时，该比率会发生变化，但在断点之间，图像将通过比例缩放进行微调。

断点通过媒体查询进行管理，网站也必须是移动友好的。我不能为此使用'vh'解决方案。

我主要是在寻找最轻的实现，所以纯 CSS 解决方案是理想的。我听说过 Masonry JS 库和衍生库Isotope，但我还没有机会使用它。

任何有关该主题的帮助将不胜感激。

4

2 回答 2

0

使用百分比width和垂直填充视口很容易media-queries，这里的问题是填充视口高度。

CSS 中总是有height: X%，但它只适用于具有固定高度的父元素中的元素，并且固定高度不是很敏感。然而：

介绍视口单位：

1vh等于视口高度的 1%，因此50vh填充视口的一半，而100vh等于视口的全高。还有视口宽度vw的单位。

浏览器对视口单位的支持。

填充视口高度：

如果您的包装元素有height: 100vh，那么它将填充整个视口高度并允许其子元素使用height: X%.

例如，如果父元素有height: 50vh并且其子元素有height: 50%，则子元素的高度将等于视口高度的 25%。这个例子。

使用您的模型，您可能希望height: 100vh在包含导航和主要区域的包装元素上使用，然后将主要元素设置为height小于 100% 以为导航元素腾出空间。然后，将图像（或图像的容器）的高度设置为您认为合适的任何百分比。

height最后，通过设置更改所述图像/图像容器的百分比media-queries以查找客户端的视口高度（以像素为单位）。

（请注意，当百分比以半像素结束时，浏览器有时难以呈现内容，因此您可能希望使用稍低的值，例如 24.99% 而不是 25% 以避免这些舍入错误）

另一个问题出现了：

这样做，您可能会发现您的图像不成比例。我没有对此的书面解决方案，但您应该能够将图像设置为background-image元素background-size: cover并调整这些元素的大小。

如果您需要将图像作为<img>元素，则需要找到其他解决方案。

我希望这能提供一些见解。

于 2013-09-25T19:04:56.877 回答
0

最接近纯 CSS 的是 Flexbox，但浏览器支持仅限于那些支持换行的浏览器（请参阅： http ://caniuse.com/flexbox，IE10 是唯一支持部分支持换行的浏览器）。目前该列表仅限于 IE10、Opera 和 Chrome。

http://codepen.io/cimmanon/pen/fqoxj

假设您的标记看起来像这样：

<header>
  Header
</header>

<nav>
  Nav
</nav>

<main>
  <figure>
    <img src="http://placekitten.com/200/200" width="200" height="200" />
    <figcaption>What a cute kitten</figcaption>
  </figure>

  <figure>
    <img src="http://placekitten.com/200/200" width="200" height="200" />
    <figcaption>So adorable!</figcaption>
  </figure>

  <figure>
    <img src="http://placekitten.com/200/200" width="200" height="200" />
    <figcaption>Irresistibly cuddly</figcaption>
  </figure>
</main>

CSS将是这样的：

body {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  body {
    display: flex;
  }
}

header {
  background: yellow;
  -webkit-flex: 1 100%;
  -ms-flex: 1 100%;
  flex: 1 100%;
}

nav {
  background: orange;
  -webkit-flex: 1 15em;
  -ms-flex: 1 15em;
  flex: 1 15em;
}

main {
  -webkit-flex: 3 30em;
  -ms-flex: 3 30em;
  flex: 3 30em;

  /* everything below this line is all that really matters
   * everything above this line is controlling the main layout */
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  main {
    display: flex;
  }
}

figure {
  display: inline-block; /* fallback for old browsers */
  /* note that the images are 200px wide, this has to match or Chrome does weird stuff */
  -webkit-flex: 1 200px;
  -ms-flex: 1 200px;
  flex: 1 200px;
}

figure img {
  min-width: 100%;
  height: auto;
}

对于移动设备，一旦您缩放到导航不再位于侧面的位置，您就可以安全地使用媒体查询来控制图像的大小：

http://cssdeck.com/labs/l2hw4aon

figure {
  display: inline-block;
}

figure img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 40em) {
  figure {
    width: 30%;
  }
}

@media (max-width: 30em) {
  figure {
    width: 45%;
  }
}

@media (max-width: 20em) {
  figure {
    width: 100%;
  }
}
于 2013-09-26T14:18:40.550 回答