Javascript 如何根据浏览器大小确定div停止收缩的位置

有很多动态设计的网站，随着浏览器尺寸的减小，div或图像会缩小

这方面的一个例子是

文本所在的div随着浏览器大小的减小而收缩。这种情况会一直持续到某一点，此时它决定停止收缩，并开始覆盖文本框

我希望使用我正在使用的JSFIDLE实现这一效果：

如果你拉伸小提琴的尺寸，你会看到动态调整的图片。 我们的目标是让它在某一点停止收缩，然后开始覆盖或俯冲在这张照片上。我想这样做是因为最终它变得很小，以至于每个图像上的文本重叠，看起来很糟糕

以下是小提琴的CSS：

.figure {
    position: relative;
    display:inline-block;
    max-width: 33%;
}

.figure .figcaption {
    text-align: center;
    height:0;
    top: 40%;
    width: 100%;
    font-size: 55px;
    color: white;
    position: absolute;
    z-index: 1;
}

.figure img {
    display: block;
    max-width: 100%;
}

---

下面是一个媒体查询的示例。您可以使用css为某些情况定义最小宽度和最大宽度。在您的情况下，只需给出一个最大宽度大小写，并在那里设置css属性

---

这是一个基本的例子。正如Jake所说，你也可以只给它一个最小宽度，但在许多情况下，页面的布局应该改变为移动或平板电脑视图，在移动或平板电脑视图中，简单地定义最小宽度是不够的

只需为你想要停止收缩的东西添加一个

min-width

大小：）

像这样：

.figure {
    position: relative;
    display: inline-block;
    max-width: 33%;
    min-width: 150px;
}

这是最新的提琴：

将导致窗口的最小宽度为500px。 达到500px后，图像停止调整大小

.figure {
    position: relative;
    display: inline-block;
    max-width: 33%;
    min-width: 150px;
}

  min-width:500px;