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

I would like to use media queries to resize elements based on the size of a div element they are in. I cannot use the screen size as the div is just used like a widget within the webpage, and its size can vary.

我希望使用媒体查询来根据元素所在的div元素的大小调整元素的大小。我不能使用屏幕大小，因为div就像网页中的小部件一样使用，它的大小可能会有所不同。

Update

Looks like there is work being done on this now: http://responsiveimagescg.github.io/cq-usecases/

看起来现在已经有了相关的工作:http://responsiveimagescg.github.io/cq-usecases/

9 个解决方案

#1

No, media queries aren't designed to work based on elements in a page. They are designed to work based on devices or media types (hence why they are called media queries). width, height, and other dimension-based media features all refer to the dimensions of either the viewport or the device's screen in screen-based media. They cannot be used to refer to a certain element on a page.

不，媒体查询并不是基于页面中的元素而设计的。它们被设计为基于设备或媒体类型工作(因此它们被称为媒体查询)。宽度、高度和其他基于尺寸的媒体特性都是指基于屏幕的媒体中的视口或设备屏幕的尺寸。它们不能用于引用页面上的某个元素。

If you need to apply styles depending on the size of a certain div element on your page, you'll have to use JavaScript to observe changes in the size of that div element instead of media queries.

如果需要根据页面上某个div元素的大小应用样式，则必须使用JavaScript来观察div元素大小的变化，而不是媒体查询。

#2

I've just created a javascript shim to achieve this goal. Take a look if you want, it's a proof-of-concept, but take care: it's a early version and still needs some work.

我刚刚创建了一个javascript shim来实现这个目标。看看你是否想要，这是一个概念验证，但要注意:这是一个早期版本，仍然需要一些工作。

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

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

#3

A Media Query inside of an iframe can function as an element query. I've successfully implement this. The idea came from a recent post about Responsive Ads by Zurb. No Javascript!

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

#4

This is currently not possible with CSS alone as @BoltClock wrote in the accepted answer, but you can work around that by using JavaScript.

目前，仅使用CSS就不可能实现这一点，正如@BoltClock在已接受的答案中所写的那样，但是您可以使用JavaScript来解决这个问题。

I created a container query (aka element query) prolyfill to solve this kind of issue. It works a bit different than other scripts, so you don’t have to edit the HTML code of your elements. All you have to do is include the script and use it in your CSS like so:

我创建了一个容器查询(即元素查询)prolyfill来解决这类问题。它的工作方式与其他脚本有点不同，所以您不必编辑元素的HTML代码。你所要做的就是把这个脚本包含进去，然后在CSS中使用，就像这样:

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

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

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

#5

I ran into the same problem a couple of years ago and funded the development of a plugin to help me in my work. I've released the plugin as open-source so others can benefit from it as well, and you can grab it on Github: https://github.com/eqcss/eqcss

几年前我遇到了同样的问题，并资助开发了一个插件来帮助我工作。我已经发布了这个插件作为开源的，所以其他人也可以从中受益，你可以在Github上获取它:https://github.com/eqcss/eqcss

There are a few ways we could apply different responsive styles based on what we can know about an element on the page. Here are a few element queries that the EQCSS plugin will let you write in CSS:

有几种方法可以根据我们对页面上的元素的了解来应用不同的响应样式。以下是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 */
  }
}

So what conditions are supported for responsive styles with EQCSS?

那么使用EQCSS支持响应样式的条件是什么呢?

Weight Queries

• min-width in px
• 在px min-width
• min-width in %
• min-width在%
• max-width in px
• 在px max-width
• max-width in %
• max-width在%

Height Queries

• min-height in px
• px的最小高度
• min-height in %
• %的最小高度
• max-height in px
• 在px max-height
• max-height in %
• max-height在%

Count Queries

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

Special Selectors

Inside EQCSS element queries you can also use three special selectors that allow you to more specifically apply your styles:

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

• $this (the element(s) matching the query)
• $this(与查询匹配的元素)
• $parent (the parent element(s) of the element(s) matching the query)
• $parent(匹配查询的元素的父元素)
• $root (the root element of the document, <html>)
• $root(文档的根元素，)

Element queries allow you to compose your layout out of individually responsive design modules, each with a bit of 'self-awareness' of how they are being displayed on the page.

元素查询允许您使用响应响应性较强的设计模块组成布局，每个模块都对页面上显示的内容有一点“自知之明”。

With EQCSS you can design one widget to look good from 150px wide all the way up to 1000px wide, then you can confidently drop that widget into any sidebar in any page using any template (on any site) and

使用EQCSS，您可以设计一个小部件，从150像素宽到1000像素宽，然后您可以自信地使用任何模板(在任何站点上)在任何页面的任何侧栏中放置小部件

#6

The question is very vague. As BoltClock says, media queries only know the dimensions of the device. However, you can use media queries in combination with descender selectors to perform adjustments.

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

The only other solution requires JS.

唯一的其他解决方案需要JS。

#7

The only way I can think that you can accomplish what you want purely with css, is to use a fluid container for your widget. If your container's width is a percentage of the screen then you can use media queries to style depending on your container's width, as you will now know for each screen's dimensions what is your container's dimensions. For example, let's say you decide to make your container's 50% of the screen width. Then for a screen width of 1200px you know that your container is 600px

我认为，只有使用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 */
}

#8

I was also thinking of media queries, but then I found this:

我也在考虑媒体的问题，但后来我发现:

• http://www.mademyday.de/css-height-equals-width-with-pure-css.html
• http://www.mademyday.de/css-height-equals-width-with-pure-css.html
• Maintain the aspect ratio of a div with CSS
• 使用CSS维护div的纵横比

Just create a wrapper <div> with a percentage value for padding-bottom, like this:

只需创建一个包装器

，其值为桨底的百分比值，如下所示:

div {
  width: 100%;
  padding-bottom: 75%;
  background:gold; /** <-- For the demo **/
}

<div></div>

It will result in a <div> with height equal to 75% of the width of its container (a 4:3 aspect ratio).

它将导致

，其高度等于其容器宽度的75%(4:3纵横比)。

This technique can also be coupled with media queries and a bit of ad hoc knowledge about page layout for even more finer-grained control.

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

It's enough for my needs. Which might be enough for your needs too.

足够我用了。这可能也足够满足你的需要了。

#9

For mine I did it by setting the div's max width, hence for small widget won't get affected and the large widget is resized due to the max-width style.

对于我的小部件，我通过设置div的最大宽度来实现，因此对于小部件不会受到影响，大部件由于最大宽度样式而被调整大小。

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