Zubair Zubair - 3 months ago 12
CSS Question

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

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.

Update



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

Answer

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.