使用 jQuery Isotope 和 CSS 媒体查询的响应式设计

Question

我目前正在尝试构建响应式设计，需要一些帮助...

基本上：

1. #wrapper DIV 包含显示在网格中的缩略图
2. 网格是使用应用于 .thumb DIV 的 jQuery Isotope 插件构建的
3. 外部和内部边距/填充是我定义的固定值，因为无论设备宽度如何，我都希望它们相同

我希望拇指宽度适合剩余空间。 我更喜欢用 CSS 来做，因为我不确定用 jQuery 做设计是不是一件好事（那些禁用 JS 的用户呢？）。

幸运的是，Isotope 不允许在 JS 代码中定义固定值，这样：

$('#wrapper').isotope({
  itemSelector: '.thumb',
    masonry: {
      columnWidth: $('#wrapper').find('.thumb')[0],
      isFitWidth: true,
      gutter: 60
    }
});

我的 CSS 如下所示：

#wrapper {
  padding: 15px 0;
}

.thumb {
  width: ?;
}

CSS3 的 CALC() 函数会是一个很好的解决方案，但不幸的是它不能跨浏览器。

您会想到哪种解决方案？ 非常感谢！

插图（蓝色 = 固定宽度，黑色 = 相对宽度）

--- 编辑：更多信息 ---

当然，网格因设备而异。 我定义了 3 个状态：

• 移动端（.thumb 在彼此下方）
• 平板电脑（2 列）
• 桌面（3 列）

Answer 1

不使用 display: flex;（在旧版浏览器上可能很难支持），您可以使用百分比宽度和具有负边距的包装器来移除边缘上的填充 - see here。

首先您需要使用box-sizing: border-box;，它支持回IE8。然后关键是在每个拇指容器的左侧和右侧填充 60px 的一半（在它们之间总共创建 60px）。显然，这会在拇指与包装纸相遇的左侧和右侧留下 30 像素的间隙。您可以将拇指放在一个负边距为 30px 的 div 中，即margin: 0 -30px;，以将拇指“拉”回包装边缘。

EDIT添加了一些断点。

HTML （在这个例子中.thumb__inner实际上是你的缩略图）

<div class="wrapper">
    <div class="wrapper__inner">
        <div class="thumbs cf">
            <div class="thumb">
                <div class="thumb__inner"></div>
            </div>
            <div class="thumb">
                <div class="thumb__inner"></div>
            </div>
            <div class="thumb">
                <div class="thumb__inner"></div>
            </div>
        </div>
    </div>
</div>

CSS

*, :before, :after {
    box-sizing: border-box;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.wrapper {
    background-color: blue;
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
}

.wrapper__inner {
    width: 100%;
}

.thumbs {
    margin: 0 -30px;
}

.thumb {
    float: left;
    padding: 30px;
    width: 33.33333%;
}

.thumb__inner {
    background: red;
    height: 100px;
}

@media all and (max-width: 1200px) {
    .thumbs {
        margin: 0;
        padding: 15px;
    }

    .thumb {
        padding: 15px;
        width: 50%;
    }
}

@media all and (max-width: 600px) {    
    .thumb {
        width: 100%;
    }
}

Answer 2

正如 Jochen Schultz 建议的那样，您可以使用 display: flex：

HTML：

<div id="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS：

#wrapper {
    background: #74C8FC;
    padding: 0 15px;
    display: flex;
}
#wrapper>div {
    background: black;
    color: white;
    flex-grow: 1;
    flex-basis: 0;
    height: 15em;
}

#wrapper>div:nth-child(2) {
    margin: 0 60px;
}

DEMO

响应式设计

要使此代码具有响应性，您应该定义断点。在我的下一个示例中，它是 600 像素。然后从#wrapper 中删除 flex 属性，使其显示彼此下方的块。

@media screen and (max-width: 600px ) {
    #wrapper {
        display: block;
    }
    #wrapper>div,
    #wrapper>div:nth-child(2) {
        margin: 0 0 1em 0;
    }
}

DEMO 2