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-05-06 00:17:51 UTC
JSON Representation

https://github.com/zoobereq/tortoiseshell-optics

A project developed for a Codecademy Intensive "Build Websites from Scratch". It utilizes HTML5, CSS3 + Flexbox, and responsive design

codecademy codecademy-intensive css3 flexbox flexbox-css flexbox-grid html-css html5 media-queries responsive-design responsive-web-design

Last synced: 04 Apr 2025

https://github.com/zoobereq/secret-agent-supply

Project developed for Codecademy Intensive "Build Websites from Scratch". Utilizes HTML5, CSS3 + Flexbox, Media queries, and responsive design

codecademy codecademy-intensive css css3 flexbox flexbox-css flexbox-grid html-css html5 media-queries responsive-design responsive-web-design

Last synced: 04 Apr 2025

https://github.com/bodnya29179/ngx-responsive-if

📱 ngx-responsive-if – Conditional rendering based on media queries.

angular conditional-rendering directive media-queries ngx-responsive-if responsive typescript ui

Last synced: 16 Mar 2025

https://github.com/eltonsantos/indecor

Tutorial: https://www.youtube.com/watch?v=6wd7PK3G7Zo

css3 html5 media-queries

Last synced: 28 Feb 2025

https://github.com/fernandabitten/space-cream

💻 📱 Page developed with html css

css-animations css-grid css3 css3-animations html5 media-queries

Last synced: 09 Apr 2025

https://github.com/abdulmoiz34/password-generator

Simple Project built by javascript | Practice project

css3 html javascript media-queries

Last synced: 16 Mar 2025

https://github.com/praveenkumar8754/project1

to create a travel landing website using HTML,CSS

css3 html5 media-queries

Last synced: 16 Mar 2025

https://github.com/hardikaz/githubusersapi

This project is made using HTML, CSS,JavaScript and GithubUsersApi. It will return the github user info of the user whose username is provided. Find the deployed link of the project below

css fully-responsive github-users-api html javascript media-queries

Last synced: 28 Feb 2025

https://github.com/hardikaz/dicegame

This is a game of dice. Responsive and functioning.

css html javascript media-queries

Last synced: 28 Feb 2025

https://github.com/ndf-web-dev/professional-portfolio

HTML, CSS, AND Bootstrap responsive template for a professional portfolio.

bootstrap bootstrap-template css flexbox html media-queries portfolio portfolio-website responsive-design responsive-layout responsive-web-design template

Last synced: 20 Feb 2025

https://github.com/soorajvp/soorajvp.github.io

Static Personal Website

bootstrap5 css html5 javascript media-queries personal-website

Last synced: 27 Feb 2025

https://github.com/brunonavarrooficial/exacttime-bootstrap

Exact Time Relojoaria

bootstrap bootstrap-template bootstrap-theme clock css css-flexbox exact flexbox gimp gimp-photo-editor gimp-plugin html media-queries relogio relogio-digital time

Last synced: 20 Feb 2025

https://github.com/brunonavarrooficial/agenciafake_htmlcss

Agência Fake de Publicidade

css flaticon flexbox google-fonts html landing-page marketing media-queries semantic-web whatsapp whatsapp-web

Last synced: 20 Feb 2025

https://github.com/siphamandlabili/tindr-clone

css html javascript media-queries

Last synced: 20 Feb 2025

https://github.com/sahithyabeesu03/food_recipe

App allows users to search for recipes and view detailed information using the MealDB API.The app features a responsive design and JavaScript for dynamic content loading and user interactions

api html5 javascript mealdb-api media-queries

Last synced: 28 Feb 2025