React component library that enables CSS container queries.
-
Updated
Oct 12, 2019 - TypeScript
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)_
React component library that enables CSS container queries.
A React utility library to match your props to the given media query
Use native CSS media queries to customize component props
[EXPERIMENT] Webpack plugin for splitting media query into multiple css files
🎁 Chanho`s Boilerplate!!!
A handy CSS media query methods of JS
Use same mechanics like CSS media queries in JavaScript instead ResizeObserver
Enable `media` attribute on Vue SFC styles
A fine API to manage media queries in JS with ease. It has first-class integration with VueJS.
This is a React PWA Template with setup of core libraries like unstated, axios, moments etc.
A ✨light✨ and magical Svelte component for CSS media queries🐹
A CSS technique that helps developers avoid ugly layout jumps while users resize their browsers.
Stateful hook that uses the matchMedia API.
React made responsible - media queries backed by state machinery
Created by Håkon Wium Lie, W3C
Released June 19, 2012