我想使用媒体查询根据他们所在的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长宽比)。

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

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

其他回答

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

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

演示1 -演示2

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

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

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

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

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

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

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

几年前我遇到了同样的问题,并资助了一个插件的开发来帮助我的工作。我已经发布了开源插件,所以其他人也可以从中受益,你可以在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宽,然后您可以放心地将该小部件放到任何页面的任何侧栏中,使用任何模板(在任何网站上)