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-12 00:18:27 UTC
JSON Representation

https://github.com/kayle7777/responsive-portfolio

css media-queries responsive

Last synced: 04 Feb 2025

https://github.com/mosalem149v2/bank-account-simulator_debi-task

A web-based bank account simulator allowing users to create accounts of various types (Savings, Checking, Business), perform transactions, and manage loans. The simulator supports deposit, withdrawal, loan requests, interest calculation, and more.

account-creation business-features css3 dom-manipulation error-handling html5 interest-calculation js media-queries responsive transactions

Last synced: 14 Jan 2025

https://github.com/mosalem149v2/football-match-scoreboard_debi-task

A simple web application to display a football match scoreboard, featuring team rosters, match odds, and functionalities for substitutions and goal tracking. Built using HTML, CSS, and JavaScript.

css3 html5 js media-queries responsive

Last synced: 14 Jan 2025

https://github.com/foramghoghari08/restaurant_website

Restaurant Website

css html javascript media-queries

Last synced: 12 Feb 2025

https://github.com/saakeeb/odami-course

A Single Page Application for online learning web-app demo

bootstrap4 css eventhandlers font-awesome media-queries reactjs reactjs-components useeffect-hook usestate-hook

Last synced: 27 Dec 2024

https://github.com/akhterjawad/media-equiry

media-queries

Last synced: 20 Jan 2025

https://github.com/peterbenoit/getviewport

GetViewport is a lightweight JavaScript utility for responsive breakpoint detection. It dynamically injects CSS breakpoints and allows JavaScript to check the current viewport size directly. This setup avoids the need for complex SCSS configurations and pseudo-elements, making it simple to integrate into any web project.

javascript media-queries responsive-design viewport

Last synced: 28 Jan 2025

https://github.com/mafsida/greentech-survey

A responsive survey form for the fictional GreenTech Solutions, created for FreeCodeCamp's Responsive Web Design certification. Includes HTML5 validation, dropdowns, radio buttons, checkboxes, and custom styling with Montserrat and Lora fonts.

accessibility cross-browser-compatibility css flexbox forms freecodecamp frontend google-fonts html-css html5 media-queries normalize-css open-source responsive-design semantic-html survey-form web-design

Last synced: 17 Jan 2025

https://github.com/mafsida/goit-markup-hw-06

This is the sixth assignment from the Full Stack Developer course at GoIT. This module focuses on creating a responsive web page using CSS media queries. It incorporates the Mobile First approach and implements a fully functional mobile navigation menu

adaptive-images cross-browser-compatibility css frontend github-pages goit goit-markup-05 homework html media media-queries mobile-first mobile-menu modal responsive-design semantic-web studying web-design web-development

Last synced: 17 Jan 2025

https://github.com/martapolii/stand-for-ukraine-website

This project is a multi-page website created using solely HTML and CSS. It raises awareness about the Russian invasion of Ukraine, covering topics like stress, management techniques, and ways to help. The site uses HTML and CSS for styling and responsive design, with an emphasis on accessibility and information clarity.

accessibility css flexbox flexbox-css html media-queries responsive-design responsive-layout responsive-web-design styling-css web-development