media-query

Star

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:

conditionally apply styles with the CSS@media and@import at-rules

target specific media for the<style>,<link>,<source>, and other HTML elements with themedia= attribute

test and monitor media states using theWindow.matchMedia() andEventTarget.addEventListener() methods

A 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.

Media types define the broad category of device for which the media query applies. The type is optional except when using the not or only logical operators.

<ul>

  <li><strong>all:</strong> Suitable for all devices.</li>

  <li><strong>print:</strong> Intended for paged material and documents viewed on a screen in print preview mode.</li>

  <li><strong>screen:</strong> Intended primarily for screens.</li>

</ul>

Media features describe a specific characteristic of the user agent, output device, or environment. Media Queries Level 4 groups 18 media features into 5 categories.

<ul>

  <li><strong>Viewport/Page Characteristics</strong></li>

  <li><strong>Display Quality</strong></li>

  <li><strong>Color</strong></li>

  <li><strong>Interaction</strong></li>

  <li><strong>Video-prefixed:</strong> The spec references user agents, including TVs, that render video and graphics in two separate planes that each have their own characteristics. <em>(upcoming Media Queries Level 5)</em></li>

</ul>

Logical operators can be used to compose a complex media query: not, and, and only. You can also combine multiple media queries into a single rule by separating them with commas.

Here are 166 public repositories matching this topic...

Language:All

Filter by language

All166 HTML56 JavaScript41 CSS36 TypeScript19 SCSS6 C++2 Dart2 Elm1 Kotlin1 PHP1

Sort:Most stars

Sort options

Most stars Fewest stars Most forks Fewest forks Recently updated Least recently updated

marcj /css-element-queries

Star4.3k

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.

css responsive media-query element-query

UpdatedSep 28, 2023
JavaScript

mg901 /styled-breakpoints

Star557

Powerful media queries for Styled Components or Emotion.

react typescript preact styled-components breakpoint media emotion css-in-js breakpoints responsive-design responsive-layout media-query media-queries css-in-react styled-media-query

UpdatedNov 5, 2025
JavaScript

lolmaus /breakpoint-slicer

Star344

Slice media queries with ease

sass scss breakpoint scss-mixins breakpoints responsive-design media-query sass-mixins media-queries responsive-web-design breakpoint-slicer

UpdatedJan 6, 2023
SCSS

egoist /vue-media

Sponsor

Star191

A CSS media query component for Vue.js

vuejs media media-query

UpdatedDec 7, 2022
JavaScript

seungyeub /awesome-web-styling

Star164

Awesome Web Styling with CSS Animation Effects ⭐️

css html design list slide ui web checkbox animation text markup styling button spinner loading nav page media-query css-animation-effects hamburger-menu-icon

UpdatedJan 24, 2022
CSS

ZeeCoder /container-query

Sponsor

Star139

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.

javascript css query browser module component postcss responsive rwd postcss-plugin responsive-design media-query element-query container-query