CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
-
Updated
Sep 28, 2023 - JavaScript
Media Queries are a way to target browsers by certain characteristics, features, and user preferences, then apply styles, or run other code based on those things. They are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. Media queries are used for the following:
@media
and @import
at-rules<style>
, <link>
, <source>
, and other HTML elements with the media=
attributeWindow.matchMedia()
and EventTarget.addEventListener()
methodsA media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators.
* **all:** Suitable for all devices.
* **print:** Intended for paged material and documents viewed on a screen in print preview mode.
* **screen:** Intended primarily for screens.
* **Viewport/Page Characteristics**
* **Display Quality**
* **Color**
* **Interaction**
* **Video-prefixed:** The spec references user agents, including TVs, that render video and graphics in two separate planes that each have their own characteristics. _(upcoming Media Queries Level 5)_
CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
Simple and powerful breakpoints for styled components and emotion.
A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.
💅 Helps manage media queries with styled components
Detect system color scheme changes on the web (Dark Mode)
Determine actual CSS media query breakpoints via JavaScript
🎠 A super media-query for styled-components. Intuitive and easy of use.
Universal media queries for React Native and web
react use-media-query-hook
Media queries engine written in pure JS!
📱
A lightweight media queries javascript library, more convenient and easy to use enquire.js
Work Store Place
PostCSS plugin to extract matched media queries to their parents
A really lightweight CSS media query component for React.
Windi CSS plugin for add media interaction variants
Scale media query `-width` by some percentage
Created by Håkon Wium Lie, W3C
Released June 19, 2012