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

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

更新

好像现在正在做的工作：
https://github.com/ResponsiveImagesCG/cq-demos

我认为这个问题太简短，无法得到一个好的答案。也许您可以提供一个示例来说明您要做什么？也许使用jsfiddle.net来测试您的想法并允许其他人帮助您？通常，您没有要求的理由，使用CSS无需媒体查询就能获得所需的结果。您可以为字体使用百分比尺寸和ems来缩放嵌套元素。但是也许我只需要查看您的html代码和CSS的示例以更好地理解？

小部件的大小如何变化？您的页面是固定宽度的吗（例如960像素），且视口大于1024像素，还是都是流畅的？尚不清楚，这将有助于了解

实际上，我当前的项目也有类似情况。对于较宽的设备，将以2列布局显示项目列表；对于较窄的设备，将以1列布局显示项目列表，但是无论如何，单个项目将处于1列布局。列表和单一版本都有两个相当宽和短的元素。在更广泛的设备上，这两个元素并排显示最佳。理想情况下，窄设备：始终垂直，宽设备：始终平行，介于（取决于1或2行）之间：垂直或平行。浮动是一种简单的解决方案，但是宽度也需要根据布局而变化。

LESS将被编译为CSS，因此，如果CSS不支持，LESS也将无法为您提供帮助。

链接不再有效吗？

#1 楼

不，媒体查询并非旨在基于页面中的元素来工作。它们被设计为基于设备或媒体类型工作（因此，它们被称为媒体查询）。 width，height和其他基于尺寸的媒体功能均指的是基于屏幕的媒体中视口或设备屏幕的尺寸。不能使用它们来引用页面上的某个元素。
如果您需要根据页面上某个div元素的大小来应用样式，则必须使用JavaScript来观察大小的变化
或者，自从最初发布此答案（例如flexbox）和标准（例如自定义属性）以来引入了更现代的布局技术，您可能根本不需要媒体或元素查询。 Djave提供了一个示例。

我听说某种方式可以将函数与媒体查询一起使用，以从包含元素中获取大小。有什么方法可以将它与媒体查询结合使用以调整元素的大小？

– appshare.co
2012年9月7日15:31

您必须使用JS来定期获取元素的宽度并做出相应的反应（定期=每秒左右，否则会降低某些浏览器的速度；因此=如果想要最快的方法，请通过切换类样式化小部件来实现）。

–FelipeAls
2012年9月7日于17:26

要在本地完成此操作，我们需要@element查询。 W3C在有关@media查询的押韵/原因方面有一些不错的文档：w3.org/TR/css3-mediaqueries/#width（此链接将您带到讨论宽度的部分-介质类型的宽度，而不是包含的元素内）

–道森
2012年9月11日下午13:19

有机会使其在电子邮件中起作用吗？当容器div太小时（例如，由于窗口大小调整，Gmail桌面版电子邮件空间太小而无法容纳2列设计）时，我尝试将移动样式应用于电子邮件。

–级别
17 Mar 16 '17 at 17:04

@Djave：你的，对吧？我喜欢。人们需要意识到一些局限性，但是它确实可以很好地工作，我建议您这样做。我在答案中添加了指向它的链接。

– BoltClock♦
9月4日7:09

#2 楼

我刚刚创建了一个JavaScript填充程序来实现此目标。看看是否需要，这是一个概念证明，但请注意：这是一个早期版本，仍然需要一些工作。

https://github.com/marcj/css-element -查询

谢谢，我印象深刻

– appshare.co
2013年6月4日下午5:25

这难以置信。结合响应式引导程序，我正在做一些很棒的工作，而仅@media无法实现。做得好。

–阿库
15年6月26日在8:28

你救了我们的命

–布罗达·诺埃尔（Broda Noel）
18年7月24日在23:39

哇，真的很好，让事情变得容易得多

– kaiser
18/12/3在14:19

凉。有问题。现在该插件检测到-需要更新最小宽度属性的元素；我需要手动编写启用最小宽度更新的CSS类列表（带标记的元素）吗？

–亚历山大·贡恰洛夫（Alexander Goncharov）
19-10-10在2:00

#3 楼

iframe内部的媒体查询可以用作元素查询。我已经成功实现了。这个想法来自Zurb最近关于响应式广告的帖子。没有JavaScript！

我认为这是最好的解决方案，因为媒体查询在iframe中有效。

– emfi
2015年10月15日15:33

#4 楼

目前，仅靠CSS不能做到这一点，因为@BoltClock在接受的答案中写道，但是您可以通过使用JavaScript来解决。

我创建了一个容器查询（aka元素查询）prolyfill来解决这种问题问题。它的工作原理与其他脚本略有不同，因此您无需编辑元素的HTML代码。您所要做的就是包括脚本并像这样在CSS中使用它：

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

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

它充满了JS。目标是仅具有CSS功能。

–绿色
16年1月26日在7:52

通常，Prolyfills（和polyfills）是用JS编写的，以启用浏览器尚不支持的功能。 Prolyfill的目标是在CSS中支持此功能后就不再使用。

–ausi
16年1月26日在8:46

@ius在问题中没有提到“仅CSS”。您是如何得出这个结论的？

–ausi
17年5月26日在13:37

@ius，除非您无法在CSS中完成，所以在CSS之外提供解决方案是完全合理的。你不觉得比“不行”要好得多；）

–韦斯利·史密斯（Wesley Smith）
17年7月27日在22:07

@ DelightedD0D在我发表评论后，他更改了答案，我对更改投了+1票。当前的回答对我来说还可以，因为这表明仅CSS无法做到这一点。

–ius
17年7月28日在7:02

#5 楼

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

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

Chris Coyier在此处进行了演示并通过演示进行了工作：https：// /css-tricks.com/putting-the-flexbox-albatross-to-real-//

为重述此问题，下面我们看到三个相同的组件，每个组件由三个橙色的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 );
  }
}

演示

海顿的文章是1000个单词详细解释它，我强烈建议您阅读它。

Heydon的文章中提到的那件事……看起来和运作起来就像魔术！谢谢您的回复，太棒了。

– ptyskju
1月14日22:23

这是每个绊脚石的人都在寻找的答案

–TehShrike
2月3日19:53

Heydon文章的链接欢迎我使用“请禁用JavaScript以查看此站点”。你在开玩笑吗？

–bluenote10
12月13日在22:03

#6 楼

几年前，我遇到了同样的问题，并资助了一个插件的开发以帮助我的工作。我已将该插件作为开源发布，因此其他人也可以从中受益，您可以在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-lines
min-children
max-children

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

$this（与查询匹配的元素）

$parent（元素的父元素））匹配查询）

$root（根ele文档修订，请参见<html>）。元素查询使您可以根据独立响应的设计模块来构成布局，每个模块都具有一些“自我意识”，以了解它们在页面上的显示方式。
借助EQCSS，您可以设计一个小部件，使其看起来从150像素宽一直到1000像素宽都不错，然后您可以放心地使用任何模板（在任何网站上）将该小部件拖放到任何页面的任何侧栏中，并且

不错的项目！我看看你做了什么

– appshare.co
15年11月12日在20:02

@innovati我在寻找一种对元素进行查询的方法时发现了这篇文章。我似乎无法正常工作。你介意看我的票吗？ github.com/eqcss/eqcss/issues/96

–安德鲁·纽比（Andrew Newby）
18年11月21日在14:39

#7 楼

这个问题很模糊。正如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。

这个问题一点都不模糊。实际上，这是一个很好的问题。不幸的是，没有好的答案。

– Stepanian
16年8月16日在19:21

使用这种方法进行糟糕的维护。

– Totty.js
17年12月3日在15:13

#8 楼

我认为可以完全使用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 */
}

不，它在屏幕上看起来很难看。屏幕尺寸变化更快，但是元素稍后出现在屏幕上并且尺寸较小。

–绿色
16年1月26日在7:50

#9 楼

我还考虑过媒体查询，但后来发现了这一点：

http://www.mademyday.de/css-height-equals-width-with-pure-css。 html
使用CSS保持div的长宽比

只需创建一个包装<div>并为其添加一个百分比值padding-bottom，就像这样：

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

 <div></div>

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

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

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

#10 楼

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

基本上，此API允许您将事件监听器附加到DOM元素。

演示1-演示2

规范草案有一个polyfill。 github.com/juggle/resize-observer

– Trevor Karjanis
4月9日18:26

Heydon的文章提供了此示例实现。在页面上搜索“ ResizeObserver”：heydonworks.com/article/the-flexbox-holy-albatross

–加布·罗根（Gabe Rogan）
5月28日11:17

#11 楼

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

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

该问题提到了窗口小部件的大小可能会有所不同，当容器较宽时，设置max-width不会更改窗口小部件的大小。 .widget只是小部件div的类的一个示例。

– Jacky Choo
18年1月30日在7:52

编程黑洞网