html - 让 body 像这样 react 灵敏？

Question

我正在尝试使我放置网站内容的 div 像这样具有响应性:sgcafe.com

如果您检查并调整浏览器的大小，内容将完全适合屏幕，根据浏览器的宽度使框变大或变小。

这是我目前得到的:http://jsfiddle.net/MarkTe/oyf3qwvb/

<div id="header"></div>
<div id="main">
    <div class="content">box 1</div>
    <div class="content">box 2</div>
    <div class="content">box 3</div>
    <div class="content">box 4</div>
</div>
<div id="footer"></div>

CSS:

#main {
    overflow:hidden;
    border: 1px solid orange;
}
.content{
    color: white;
    margin-left: 3%;
    margin-right: 3%;
    width: 200px;
    height: 250px;
    background: #2d2d2d;
    border: 1px solid #DDD;
    border-radius: 10px;
   float: left;

Answer 1

http://masonry.desandro.com/

使用这个库。它正是您想要的。如果您希望 div 的大小相同，只需保持 div 的宽度和高度，masonry 将根据视口(viewport)大小重新调整它们。有任何问题请告诉我。

-------------------------------------------- - - 编辑 - - - - - - - - - - - - - - - - - - - - - - -

为了回答您下面的问题，我创建了一个 fiddle 来实现我认为您的目标:

http://jsfiddle.net/z4fs7nht/1/

我补充说:

transitionDuration: 1,

对于将 Masonry 调用到您的元素的 JavaScript(我在文档中找到的)并且还添加了:

*{
    -webkit-transition:all 1s ease;
         -moz-transition:all 1s ease;
               -o-transition:all 1s ease;
                     transition:all 1s ease;
}

在 CSS 文件中。当您更改浏览器/视口(viewport)大小时，这些样式为那里的元素提供了“反弹”的感觉。

您会在我的 fiddle 示例中注意到，我还使用媒体查询在浏览器更改时更改元素的宽度。更改宽度使我能够为过渡效果提供更自然的感觉，并且模拟您从中获得灵感的网站。

/* 注意事项 */我已经注释掉了:

/*         background: blue; */

背景颜色样式。我有这些，所以当窗口达到那个大小时，它会改变背景颜色，这样我就可以很容易地看到变化。您可以删除它们，或在编辑您的网站时使用它们。

祝你好运!