A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.
-
Updated
Jun 18, 2024 - 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)_
A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units. The best choice to create a scalable interface on different displays by one design size.
An SSR compatible approach to CSS media query based responsive layouts for React.
A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:
Simple and powerful breakpoints for styled components and emotion.
A simple, tiny alternative to element/container queries
🎉 React library to render components only on specific viewports 🔥
Slice media queries with ease
一款 PostCSS 插件,将固定尺寸的视图转为可跟随宽度变化而等比例伸缩的视图。To adapt different displays by one mobile viewport.
Style React Native components using CSS, PostCSS, Sass, Less or Stylus.
📸 Sliding action script
Media-query- or JavaScript-based theme variants with fallback for Tailwind CSS
PostCSS plugin for sorting and combining CSS media queries with mobile-first / desktop-first methodologies.
Extremely powerful Sass media query mixin. Allows you to create almost any media query you can imagine.
🌈 Define custom viewports for your Nuxt project
MatchMedia component library for Vue
💅 Helps manage media queries with styled components
A powerful and flexible React component for creating responsive content with automatic media query generation. 为响应式内容自动生成媒体查询
Respond to changes in a DOM element's size. With React Breakpoints, element queries are no longer "web design's unicorn" 🦄
Created by Håkon Wium Lie, W3C
Released June 19, 2012