Element queries are a yet-proposed CSS module that allow developers to style elements based on their size and shape. Hitch.js is used to enable these features in CSS.
Syntactically, element query features resemble CSS pseudo classes: they consist of a selector, a colon, a feature name, and a value to test for.
<selector>:<query>(<value>)Element queries allow content to adapt to a wide range of viewing experiences, such as width, height, aspect ratio, and orientation, all without having to change the content itself.
min-width and max-width describe the layout width of an element. This includes its horizontal borders, horizontal padding, horizontal scrollbar (if present and rendered), and its CSS width.
:min-width(<value>):max-width(<value>)min-height and max-height describe the layout height of an element. This includes its vertical borders, vertical padding, vertical scrollbar (if present and rendered), and its CSS height.
:min-height(<value>):max-height(<value>)min-aspect-ratio and max-aspect-ratio describe the aspect ratio of an element. This value consists of two positive integers separated by a slash / character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).
:min-aspect-ratio(<ratio>):max-aspect-ratio(<ratio>)orientation describes whether an element is in landscape (it is wider than it is tall) or portrait (it is taller than it is wide) mode.
:orientation(<landscape|portrait>)