jquery - 使用 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)。显然，这会在拇指与 wrapper 相遇的左侧和右侧留下 30px 的间隙。您可以将拇指放在一个 div 中，该 div 的边距为 30px，即 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%;
    }
}