更新

Question

我想使用媒体查询根据它们所在的div元素的大小来调整元素的大小。我不能使用屏幕大小，因为div只是像小部件一样使用网页，其大小可能会有所不同。

更新

现在看起来正在做的工作： https://github.com/ResponsiveImagesCG/cq-demos

Answer 1

不，媒体查询的设计不适用于基于页面中的元素。它们旨在基于设备或media types工作（因此它们被称为媒体查询）。 width，height和其他基于维度的媒体功能都是指基于屏幕的媒体中视口或设备屏幕的尺寸。它们不能用于引用页面上的某个元素。

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

Answer 2

我刚刚创建了一个javascript shim来实现这个目标。看看你是否想要，它是一个概念验证，但要小心：它是一个早期版本，仍然需要一些工作。

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

Answer 3

iframe内部的媒体查询可以作为元素查询。我已经成功实现了这一点。这个想法来自Zurb最近关于Responsive Ads的帖子。没有Javascript！

Answer 4

目前无法单独使用CSS，因为@BoltClock在接受的答案中写道，但您可以使用JavaScript解决这个问题。

我创建了一个容器查询（又名元素查询）prolyfill来解决这类问题。它的工作方式与其他脚本略有不同，因此您无需编辑元素的HTML代码。您所要做的就是包含脚本并在CSS中使用它，如下所示：

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

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

Answer 5

几年前我遇到了同样的问题，并资助开发一个插件来帮助我完成工作。我已经将该插件作为开源发布，所以其他人也可以从中受益，你可以在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
%
px
%

高度查询

px
%
px
%

计算查询

最小字符
MAX-字符
分钟线
MAX-线
最小的儿童
MAX-儿童

特殊选择器

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

$this（与查询匹配的元素）
$parent（与查询匹配的元素的父元素）
$root（文档的根元素<html>）

元素查询允许您从单独响应的设计模块中构建您的布局，每个模块都具有一点“自我意识”和＃39;它们如何在页面上显示。

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

Answer 6

问题非常模糊。正如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。

Answer 7

我认为你可以完全用css完成你想要的东西的唯一方法就是为你的小部件使用一个流体容器。如果您的容器宽度是屏幕的百分比，那么您可以根据容器的宽度使用媒体查询来设置样式，因为您现在知道每个屏幕的尺寸您的容器是什么＆＃ 39;尺寸。例如，我们假设你决定让你的容器占屏幕宽度的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 */
}

Answer 8

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

只需使用<div>的百分比值创建包装padding-bottom，如下所示：

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

这将导致<div>的高度等于其容器宽度的75％（纵横比为4：3）。

此技术还可以与媒体查询和一些关于页面布局的临时知识相结合，以实现更精细的控制。

这足以满足我的需求。这也可能足以满足您的需求。

Answer 9

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

它由Heydon Pickering组成（我相信）。他在此处详细介绍了该过程：http://www.heydonworks.com/article/the-flexbox-holy-albatross

克里斯·科耶尔（Chris Coyier）领取了它，并在此处进行了演示：https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/

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

后两个数字块垂直显示，因为它们限于水平空间，而顶部的3个块水平放置。

它使用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个单词详细解释，我强烈建议您阅读。

Answer 10

您可以使用ResizeObserver API。它仍处于早期阶段，因此尚不为所有浏览器所支持（但是可以使用多种polyfill来帮助您）。

基本上，此API允许您将事件侦听器附加到DOM元素的调整大小。

Demo 1-Demo 2

Answer 11

对于我来说，我是通过设置div的最大宽度来实现的，因此小小部件不会受到影响，并且由于最大宽度样式而调整大小部件的大小。

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

Answer 12

我找到了使用 JavaScript 的最佳方式 Resize observer

媒体查询可以根据div元素而不是屏幕调整大小吗？

更新

12 个答案:

重量查询

高度查询

计算查询

特殊选择器