An SSR compatible approach to CSS media query based responsive layouts for React.
-
Updated
May 10, 2024 - 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)_
An SSR compatible approach to CSS media query based responsive layouts for React.
📸 Sliding action script
Media-query- or JavaScript-based theme variants with fallback for Tailwind CSS
🌈 Define custom viewports for your Nuxt project
MatchMedia component library for Vue
Respond to changes in a DOM element's size. With React Breakpoints, element queries are no longer "web design's unicorn" 🦄
🃏 Mock for fully testing any media queries with Jest
Better styling support for Emotion (React Native): Media queries, relative units, percents, operations and more...
The tool extracts all media at-rules into dedicated files and download them only when the user device matches the media query.
🚀 Handy dynamic styles utilities for React Native and React Native Web.
☁️🎨 An experimental universal, customizable styling and animation library for React Native. (beta)
A fine API to manage media queries in JS with ease. It has first-class integration with VueJS.
🔍 <Only /> displays some contents for particular screen sizes
Small helper library to work with layout breakpoints in Javascript.
Svelte component and helper functions for creating easy responsive layouts with CSS media queries.
A handy CSS media query methods of JS
Lightweight, performant, and easy to use media query library for React 📱 💻 🖥️
Tiny plugin for managing responsiveness breakpoints in Vue3 apps.
💻 A tiny (1.2kb gzipped) media query utility for programmatic control of screen viewports.
Listen to media query updates in JavaScript
Created by Håkon Wium Lie, W3C
Released June 19, 2012