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


当前回答

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

其他回答

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

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

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

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

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

演示1 -演示2

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

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

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

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

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

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