小开

最佳答案

是的，CSS容器查询就是你要找的。CSS包含模块是详细描述该特性的规范。

你可以阅读更多关于十年的工作，包括提案，概念证明，讨论和其他更广泛的web开发社区在这里!有关这个特性如何工作和使用的更多细节，请查看Miriam Suzanne的广泛的 讲解员。

目前只有Chromium 105+支持开箱即用的容器查询，不过Safari 16也会支持。希望不久我们就能看到这样一个系统的健壮的跨浏览器实现。这是一个折磨人的等待，但我很高兴它不再是我们必须简单地接受的CSS不可逾越的限制，因为循环依赖或无限循环等等(这些仍然是拟议设计的某些方面的潜在问题，但我有信心CSSWG会找到一种方法)。

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

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

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

小开

这个问题很模糊。正如BoltClock所说，媒体查询只知道设备的尺寸。但是，您可以将媒体查询与下降选择器结合使用来执行调整。

.wide_container { width: 50em }


.narrow_container { width: 20em }


.my_element { border: 1px solid }


@media (max-width: 30em) {
.wide_container .my_element {
color: blue;
}


.narrow_container .my_element {
color: red;
}
}


@media (max-width: 50em) {
.wide_container .my_element {
color: orange;
}


.narrow_container .my_element {
color: green;
}
}

唯一的其他解决方案需要JS。

小开

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

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

小开

iframe中的Media Query可以作为元素查询。我已经成功地实现了这一点。这个想法来自Zurb最近关于响应广告的帖子。没有Javascript !

小开

我认为你可以用css完成你想要的唯一方法，就是为你的小部件使用流体容器。如果你的容器的宽度是屏幕的一个百分比，那么你可以根据你的容器的宽度使用媒体查询来设置样式，现在你会知道每个屏幕的尺寸是你的容器的尺寸。例如，假设你决定将容器的宽度设置为屏幕宽度的50%。然后对于屏幕宽度为1200px的容器，你知道你的容器是600px

.myContainer {
width: 50%;
}


/* you know know that your container is 600px
* so you style accordingly
*/
@media (max-width: 1200px) {
/* your css for 600px container */
}

小开

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

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

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

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

小开

几年前我遇到了同样的问题，并资助了一个插件的开发来帮助我的工作。我已经发布了开源插件，所以其他人也可以从中受益，你可以在Github: https://github.com/eqcss/eqcss上获取它

根据我们对页面元素的了解，有几种方法可以应用不同的响应样式。下面是EQCSS插件允许你在CSS中编写的一些元素查询:

@element 'div' and (condition) {
$this {
/* Do something to the 'div' that meets the condition */
}
.other {
/* Also apply this CSS to .other when 'div' meets this condition */
}
}

那么EQCSS支持响应式样式的哪些条件呢?

重量查询

px中的min-width
%中的min-width
px中的max-width
%中的max-width

高度的查询

px中的min-height
%中的min-height
px中的max-height
%中的max-height

统计查询

min-characters
max-characters
min-lines
max-lines
min-children
max-children

特别的选择器

在EQCSS元素查询中，你还可以使用三个特殊的选择器，让你更具体地应用你的样式:

$this(匹配查询的元素)
$parent(匹配查询的元素的父元素)
$root(文档的根元素，<html>)

元素查询允许你用独立的响应式设计模块组合布局，每个模块都有一点“自我意识”，知道它们在页面上是如何显示的。

使用EQCSS，您可以设计一个小部件，从150px宽一直到1000px宽，然后您可以放心地将该小部件放到任何页面的任何侧栏中，使用任何模板(在任何网站上)

小开

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

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

div {
width: 100%;
padding-bottom: 75%;
background:gold; /** <-- For the demo **/
}

<div></div>

It will result in a <div> with height equal to 75% of the width of its container (a 4:3 aspect ratio).

This technique can also be coupled with media queries and a bit of ad hoc knowledge about page layout for even more finer-grained control.

It's enough for my needs. Which might be enough for your needs too.

小开

对于我来说，我通过设置div的最大宽度来做到这一点，因此对于小部件不会受到影响，而大部件由于max-width样式而调整大小。

  // assuming your widget class is "widget"
.widget {
max-width: 100%;
height: auto;
}

小开

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

这是海顿·皮克林编的(我相信)。他在这里详细描述了这个过程: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 );
}
}

< a href = " https://codepen.io/EightArmsHQ/pen/mvqJwg?编辑= 0100 noreferrer“rel = >演示< / >

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