jQuery 同位素和 CSS 媒体查询的响应式设计

Question

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

基本上：

a #wrapper DIV 包含在网格中显示的缩略图
网格是使用 jQuery 应用于 .thumb DIVs
外部和内部 margins/paddings 是我定义的固定值，因为无论设备宽度如何，我都希望它们相同

我希望拇指宽度适合剩余 space。 我更喜欢用 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

正如 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

响应式设计

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

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

DEMO 2

Answer 2

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

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

编辑添加了一些断点。

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

jQuery 同位素和 CSS 媒体查询的响应式设计

Responsive design with jQuery Isotope and CSS Media-queries

jquery

css

media-queries

响应式设计