媒体查询可以基于div元素而不是屏幕调整大小吗？ [英] Can media queries resize based on a div element instead of the screen?

问题描述

我想使用媒体查询来根据它们所在的 div 元素的大小来调整元素大小。我无法使用屏幕大小作为<$ c $

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.

看起来现在有工作正在进行：
http://responsiveimagescg.github.io/eq-usecases/?utm_source=dlvr.it&utm_medium=twitter ⁴⁰⁴

Looks like there is work being done on this now: http://responsiveimagescg.github.io/eq-usecases/?utm_source=dlvr.it&utm_medium=twitter⁴⁰⁴

推荐答案

不，媒体查询并非基于网页中的元素设计。它们的设计目的是根据设备或媒体类型（因此称为 媒体查询）。 width ，< a href =http://www.w3.org/TR/css3-mediaqueries/#height =noreferrer> height 和其他基于维度的媒体特征都涉及基于屏幕的媒体中的视口或设备屏幕的尺寸。它们不能用于引用页面上的某个元素。

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.

如果您需要根据某个 div 元素，你必须使用JavaScript来观察 div 元素的大小变化，而不是媒体查询。

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元素而不是屏幕调整大小吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！