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

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

是的，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提供了一个例子。

2012-09-07 13:39:26

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

2012-09-07 17:49:13

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

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

2013-06-02 03:29:27

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

2014-07-16 19:25:53

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

2015-06-17 09:05:29

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

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

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

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

2015-10-05 13:35:06

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

统计查询

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

特别的选择器

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

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

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

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

2015-11-12 19:26:12

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

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长宽比)。

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

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

2017-07-30 23:46:37

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

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

2018-01-24 08:28:14

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

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

2019-09-26 13:49:20

您可以使用ResizeObserver API。它还处于早期阶段，所以还不是所有的浏览器都支持它(但有一些填充程序可以帮助你做到这一点)。

这个API允许您在调整DOM元素大小时附加一个事件侦听器。

演示1 -演示2

2019-10-23 10:55:57

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

推荐文章

最新文章

标签