Media Queries

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 the media= attribute
• test and monitor media states using the Window.matchMedia() and EventTarget.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.
  • 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.
• 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.
  • 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)
• 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.

• GitHub: https://github.com/topics/media-queries
• Wikipedia: https://en.wikipedia.org/wiki/Media_queries
• Created by: Håkon Wium Lie, W3C
• Released: June 19, 2012
• Related Topics: responsive-design, container-queries, client-hints, css-breakpoints, css-viewport,
• Aliases: media-query,
• Last updated: 2025-01-21 00:13:49 UTC
• JSON Representation

https://github.com/jmgogo/basic-webdev

A sandbox repository containing static web development files. 🗄️

css grid html media-queries

Last synced: 24 Dec 2024

https://github.com/kento75/website-design-learn

css3 grid-layout html5 media-queries

Last synced: 19 Dec 2024

https://github.com/dimitribouteille/sass-no-duplicate-breakpoints

Sass no duplicate breakpoints est une librairie Sass qui permet de regrouper les points de rupture.

css media-queries responsive responsive-css sass sass-library sass-mixins

Last synced: 19 Dec 2024

https://github.com/talhat298/bus-travel

A simple, pure CSS animation featuring a bus and a car traveling across a detailed background. The animation includes moving vehicles with rotating wheels, all designed using only HTML and CSS, without any JavaScript.

html-css media-queries

Last synced: 19 Dec 2024

https://github.com/ashishsingh-30/temporarytest

OneInsure Task

css media-queries reactjs redux shadcn-ui tailwindcss typescript vitejs

Last synced: 19 Dec 2024

Media Queries Awesome Lists

Media Queries Categories