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

Can media queries resize based on a div element instead of the screen?

提问by Yazz.com

I would like to use media queries to resize elements based on the size of a divelement they are in. I cannot use the screen size as the divis 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: https://github.com/ResponsiveImagesCG/cq-demos

看起来现在正在做这方面的工作：https: //github.com/ResponsiveImagesCG/cq-demos

采纳答案by BoltClock

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 mediaqueries). 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.

不，媒体查询并非旨在基于页面中的元素工作。它们旨在基于设备或媒体类型工作（因此称为媒体查询）。width、height和其他基于尺寸的媒体功能都指的是视口或设备屏幕在基于屏幕的媒体中的尺寸。它们不能用于引用页面上的某个元素。

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

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

回答by Marc J. Schmidt

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 垫片来实现这个目标。如果您愿意，请看一看，这是一个概念验证，但请注意：它是早期版本，仍然需要一些工作。

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

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

回答by haddnin

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 Adsby Zurb. No Javascript!

iframe 内的媒体查询可以用作元素查询。我已经成功地实现了这一点。这个想法来自Zurb最近关于响应式广告的帖子。没有Javascript！

回答by ausi

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

正如@BoltClock 在接受的答案中所写的那样，目前单独使用 CSS 是不可能的，但是您可以使用 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

回答by innovati

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
• min-width in %
• max-width in px
• max-width in %

• 最小宽度输入 px
• 最小宽度输入 %
• 最大宽度输入 px
• 最大宽度输入 %

Height Queries

高度查询

• min-height in px
• min-height in %
• max-height in px
• max-height in %

• 最小高度 px
• 最小高度 %
• 最大高度 px
• 最大高度 %

Count Queries

计数查询

• min-characters
• max-characters
• min-lines
• max-lines
• min-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)
• $parent(the parent element(s) of the element(s) matching the query)
• $root(the root element of the document, <html>)

• $this（与查询匹配的元素）
• $parent（与查询匹配的元素的父元素）
• $root（文档的根元素，<html>）

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 像素宽的小部件，然后您可以自信地将该小部件放入任何页面的任何侧边栏中，使用任何模板（在任何站点上）和

回答by Djave

From a layout perspective, it is possible using modern techniques.

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

Its made up (I believe) by Heydon Pickering. He details the process here: http://www.heydonworks.com/article/the-flexbox-holy-albatross

它由 Heydon Pickering 组成（我相信）。他在这里详细介绍了这个过程：http: //www.heydonworks.com/article/the-flexbox-holy-albatross

Chris Coyier picks it up and works through a demo of it here: https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/

Chris Coyier 拿起它并在此处完成了它的演示：https: //css-tricks.com/putting-the-flexbox-albatross-to-real-use/

To restate the issue, below we see 3 of the same component, each made up of three orange divs labelled a, band c.

为了重申这个问题，下面我们看到 3 个相同的组件，每个由三个标记为a、b和 的橙色 div 组成c。

The second two's blocks display vertically, because they are limited on horizontal room, while the top components 3 blocks are laid out horizontally.

第二个二的块垂直显示，因为它们被限制在水平空间，而顶部的3个块是水平布置的。

It uses the flex-basisCSS property and CSS Variables to create this effect.

它使用flex-basisCSS 属性和 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's article is 1000 words explaining it in detail, and I'd highly recommend reading it.

Heydon 的文章有 1000 字，详细解释了它，我强烈建议您阅读它。

回答by cimmanon

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。

回答by Roumelis George

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%。然后对于 1200 像素的屏幕宽度，您知道您的容器是 600 像素

.myContainer {
  width: 50%;
}

/* you know know that your container is 600px 
 * so you style accordingly
*/
@media (max-width: 1200px) { 
  /* your css for 600px container */
}

回答by Hendy Irawan

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

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

• http://www.mademyday.de/css-height-equals-width-with-pure-css.html
• Maintain the aspect ratio of a div with CSS

• http://www.mademyday.de/css-height-equals-width-with-pure-css.html
• 使用 CSS 保持 div 的纵横比

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

只需创建一个<div>带有百分比值的包装器padding-bottom，如下所示：

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).

这将导致<div>高度等于其容器宽度的 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.

足以满足我的需要。这也可能足以满足您的需求。

回答by José Salgado

You can use the ResizeObserverAPI. It's still in it's early days so it's not supported by all browsers yet (but there several polyfills that can help you with that).

您可以使用ResizeObserverAPI。它仍处于早期阶段，因此并非所有浏览器都支持它（但有几个 polyfill 可以帮助您解决这个问题）。

Basically this API allow you to attach an event listener to the resize of a DOM element.

基本上这个 API 允许您将事件侦听器附加到 DOM 元素的大小调整。

Demo 1- Demo 2

演示 1-演示 2