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

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

当前回答

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

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

其他回答

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

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

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

这是海顿·皮克林编的(我相信)。他详细介绍了这个过程: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单独写在接受的答案@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

是的，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

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

推荐文章

最新文章

标签