Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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-02-01 00:18:17 UTC
JSON Representation

https://github.com/georginapuig/popconvert

slot machine and video modal

casino-games css hooks media-queries modal popup react react-components reactjs responsive-design slot-machine

Last synced: 23 Jan 2025

https://github.com/haneen-daoud/simple-js-project

tic tac toe

css html js media-queries

Last synced: 28 Dec 2024

https://github.com/maiquitome/rocketseat-projeto-zingen-responsividade

🎤🎙️🎶🎵 Projeto do curso `Full-Stack` da **Rocketseat**

media-queries responsive-design rocketseat-fullstack-course

Last synced: 15 Jan 2025

https://github.com/hemants1703/results-summary-component-frontend-mentor

A Summary of Results as a Component frontend development practice

css css3 html html5 media-queries responsive-design

Last synced: 22 Jan 2025

https://github.com/stefanoconsonni/omnifood

A beautiful landing page built for a Tech Company. The page if fully responsive for all screen sizes. All the images used for the project have been optimized for better performance. Specific favicons for android and apple devices have been added.

css html javascript media-queries responsive-design

Last synced: 12 Jan 2025

https://github.com/victorlcastro-dsa/login-site-desafio

Este projeto é um exemplo de uma tela de login simples e responsiva, desenvolvida apenas com HTML e CSS. O foco está no uso de media queries para adaptar o layout a diferentes dispositivos. Não inclui funcionalidades de back-end ou autenticação, sendo destinado apenas para fins de visualização e aprendizado.

html-css media-queries project-based-learning web-development

Last synced: 13 Jan 2025

https://github.com/danilosalvador/zingen

Projeto 05 do MBA Rocketseat Full-stack para reforçar os conceitos de CSS Media Queries para criação de páginas responsivas.

css html media-queries

Last synced: 08 Jan 2025

https://github.com/akshayone8/responsive-dashboard

Responsive Dashboard

css html5 javascript media-queries responsive-web-design

Last synced: 01 Feb 2025

https://github.com/mrbrunelli/css-flexbox

Meus estudos sobre flexbox, heranças com nth-child e media queries

css flexbox media-queries nth-child

Last synced: 15 Jan 2025

https://github.com/mosalem149v2/staff-dish-booking-management_debi-task

A comprehensive web application for managing staff roles, dishes, and table bookings for a restaurant. This project includes functionalities for adding, editing, and deleting staff roles and dishes, checking the restaurant's operating status, managing daily specials, and tracking customer bookings.

application-development css3 customer-management frontend-development html5 javascript media-queries responsive restaurant-management user-interface web-development