媒体查询可以根据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

其他回答

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

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

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

2013-06-02 03:29:27

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

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

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

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

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

2018-01-24 08:28:14

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

推荐文章

最新文章

标签