从布局的角度来看，使用现代技术是可能的。

这是海顿·皮克林编的(我相信)。他详细介绍了这个过程:http://www.heydonworks.com/article/the-flexbox-holy-albatross

克里斯·科伊尔(Chris coyer)拿起它，并在这里进行了演示:https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/

为了重申这个问题，下面我们看到三个相同的组件，每个组件由三个橙色div组成，分别标记为a, b和c。

后两个方块垂直显示，因为它们在水平空间上受到限制，而顶部的三个方块则水平布局。

它使用flex-basis CSS属性和CSS变量来创建这种效果。

.panel{
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #f00;
  $breakpoint: 600px;
  --multiplier: calc( #{$breakpoint} - 100%);
  .element{
    min-width: 33%;
    max-width: 100%;
    flex-grow: 1;
    flex-basis: calc( var(--multiplier) * 999 );
  }
}

Demo

Heydon的文章有1000字详细地解释了它，我强烈推荐阅读它。

更新2021/22

正如在其他回答中提到的，容器查询即将到来。它有一个完整的规范，它的用法在MDN上有详细说明:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

还有一种填充方法可以让还不支持它的浏览器跟上速度:

https://github.com/GoogleChromeLabs/container-query-polyfill

这里有一个很好的概述视频:

https://www.youtube.com/watch?v=gCNMyYr7F6w

现在Chrome已经发布(2022年9月5日)

https://caniuse.com/css-container-queries

我刚刚创建了一个javascript shim来实现这个目标。如果您愿意，可以查看一下，这是一个概念验证，但请注意:这是一个早期版本，仍然需要一些工作。

https://github.com/marcj/css-element-queries

我也在考虑媒体查询，但后来我发现了这个:

http://www.mademyday.de/css-height-equals-width-with-pure-css.html 使用CSS维护div的纵横比

只需创建一个包装器<div>，并为padding-bottom设置一个百分比值，如下所示:

div { 宽度:100%; padding-bottom: 75%; 背景:黄金;/** <——用于演示**/ ｝ < div > < / div >

它将生成一个<div>，其高度等于其容器宽度的75%(4:3长宽比)。

这种技术还可以与媒体查询和一些关于页面布局的专门知识相结合，以实现更细粒度的控制。

这足够我用了。这也足够满足你的需求了。

从布局的角度来看，使用现代技术是可能的。

这是海顿·皮克林编的(我相信)。他详细介绍了这个过程:http://www.heydonworks.com/article/the-flexbox-holy-albatross

克里斯·科伊尔(Chris coyer)拿起它，并在这里进行了演示:https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/

为了重申这个问题，下面我们看到三个相同的组件，每个组件由三个橙色div组成，分别标记为a, b和c。

后两个方块垂直显示，因为它们在水平空间上受到限制，而顶部的三个方块则水平布局。

它使用flex-basis CSS属性和CSS变量来创建这种效果。

.panel{
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #f00;
  $breakpoint: 600px;
  --multiplier: calc( #{$breakpoint} - 100%);
  .element{
    min-width: 33%;
    max-width: 100%;
    flex-grow: 1;
    flex-basis: calc( var(--multiplier) * 999 );
  }
}

Demo

Heydon的文章有1000字详细地解释了它，我强烈推荐阅读它。

更新2021/22

正如在其他回答中提到的，容器查询即将到来。它有一个完整的规范，它的用法在MDN上有详细说明:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

还有一种填充方法可以让还不支持它的浏览器跟上速度:

https://github.com/GoogleChromeLabs/container-query-polyfill

这里有一个很好的概述视频:

https://www.youtube.com/watch?v=gCNMyYr7F6w

现在Chrome已经发布(2022年9月5日)

https://caniuse.com/css-container-queries

是的，CSS容器查询就是你要找的。CSS遏制模块是详细说明此特性的规范。

你可以在这里阅读更多关于这十年工作的内容，包括提案、概念验证、讨论和更广泛的web开发人员社区的其他贡献!有关这样一个功能如何工作和使用的更多细节，请查看Miriam Suzanne的详细解释。

Currently only Chromium 105+ supports Container queries out of the box, though Safari 16 will include support as well. Hopefully it won't be much longer before we see a robust cross-browser implementation of such a system. It's been a grueling wait, but I'm glad that it's no longer something we simply have to accept as an insurmountable limitation of CSS due to cyclic dependencies or infinite loops or what have you (these are still a potential issue in some aspects of the proposed design, but I have faith that the CSSWG will find a way).

媒体查询并不是基于页面中的元素设计的。它们被设计为基于设备或媒体类型工作(因此它们被称为媒体查询)。在基于屏幕的媒体中，宽度、高度和其他基于尺寸的媒体功能都是指视口或设备屏幕的尺寸。它们不能用于指代页面上的某个元素。

如果您需要根据页面上某个div元素的大小应用样式，则必须使用JavaScript来观察该div元素大小的变化，而不是使用媒体查询。

或者，在最初发布这个答案之后引入了更现代的布局技术(如flexbox)和标准(如自定义属性)，您可能根本不需要媒体或元素查询。Djave提供了一个例子。

这是目前不可能与CSS单独写在接受的答案@BoltClock，但您可以通过使用JavaScript的工作。

我创建了一个容器查询(又名元素查询)填充来解决这类问题。它的工作方式与其他脚本略有不同，因此您不必编辑元素的HTML代码。你所要做的就是包括脚本，并在你的CSS中使用它，就像这样:

.element:container(width > 99px) {
    /* If its container is at least 100px wide */
}

https://github.com/ausi/cq-prolyfill