Responsive website design with Element Queries

Element Queries allow changing the size of a HTML element based on the style of other elements. Element queries are similar to media queries, but are based on element size instead of browser or view-port size.

Element Queries are not supported by browsers natively like media queries. Two libraries that implement element queries are: EQCSS and CSS Element-Queries. Both libraries are small sized JavaScript files, that parse contents of CSS files and run the element queries defined in the file.

The CSS Elements Query library has a feature called ResizeSensor. It allows JavaScript code to be run, when an element is resized. It can be used to change layout of pages that display dynamic content such as ads.

The Specification for CSS Element Queries describes how CSS Element Queries work

See the question Can media queries resize based on a div element instead of the screen? on Stack-overflow for more information about Element queries

Published 18 Mar 2019

Pak Jiddat provides open source scripts and tutorials related to Web Development and System Administration.