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-01-21 00:13:49 UTC
JSON Representation

https://github.com/mk-manishkumar/business-landing-page

This project is a Business Landing Webpage which is created by using HTML and CSS. It's fully responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 10 Jan 2025

https://github.com/mk-manishkumar/web-design-landing-page

This project is a basic UI webpage which is created by using HTML and CSS. It's responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 10 Jan 2025

https://github.com/aldairavelino/colegio-de-saude

Página Web

css3 health html5 media-queries page responsivity school

Last synced: 28 Nov 2024

https://github.com/ajaypatil1993/portfolio_website

Grow intern Task-2 / Portfolio Website

css3 html5 javascript media-queries responsive-web-design version-control

Last synced: 13 Jan 2025

https://github.com/mk-manishkumar/dance-home-page

This project is a Dance Landing Webpage which is created by using HTML and CSS. It's fully responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 10 Jan 2025

https://github.com/mk-manishkumar/street-style-landing-page

This project is a basic UI project which is created by using HTML and CSS. It's fully responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 10 Jan 2025

https://github.com/ahmadrezamozaffary/mapty-oop

🏅

cdn css3 defer-loading flex grid html5 javascript leaflet localstorage media-queries oop

Last synced: 13 Jan 2025

https://github.com/mohamedkhamismostafa/special-design-template

I benefited a lot in making this wonderful project, in which I limited some of my skills to HTML, CSS, and vanilla JavaScript.

css html-css-javascript html5 media-queries pure-css pure-html-css-javascript pure-javascript

Last synced: 10 Jan 2025

https://github.com/mk-manishkumar/law-home-page

A basic UI webpage which is fully responsive and created by HTML and CSS

css-grid css3 html5 media-queries

Last synced: 10 Jan 2025

https://github.com/pythondeveloper6/egens-landing-page-

simple landing page using Bootstrap5 , html , css and Javascript

bootstrap5 css github-pages html javascript media-queries

Last synced: 19 Jan 2025

https://github.com/haneen-daoud/e-commerce-academy

ecommerce final project

bootstrap css html5 media-queries react

Last synced: 28 Dec 2024

https://github.com/bitstarr/ruleemall

A helper for finding the right CSS breakpoints

css media-queries viewport

Last synced: 06 Dec 2024

https://github.com/hamzashahbaz/responsive-sass-mixin

📱💻🖥 Sass responsive utility mixin for major screen sizes.

css media-queries responsive sass sass-mixins

Last synced: 06 Dec 2024

https://github.com/nallenscott/windshear

React hook for just-in-time component rendering, with first-class support for Tailwind CSS ⛵️

breakpoints hooks just-in-time media-queries pinpoint-accuracy react react-hooks tailwind-css viewport-dimensions

Last synced: 11 Oct 2024

https://github.com/mk-manishkumar/hosting-landing-page

This project is a Hosting Landing Webpage which is created by using HTML and CSS. It's responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 10 Jan 2025

https://github.com/clouby/media-queries-min

⦿ - Simplest way to match media queries using Child Functions and Hooks.

hooks media-queries react

Last synced: 25 Nov 2024

https://github.com/haxe-react/haxe-react-media

CSS media queries for Haxe React.

haxe media-queries reactjs

Last synced: 03 Dec 2024

https://github.com/saoudi-h/tw-screens

React hooks for using Tailwind CSS breakpoints easily and efficiently.

breakpoint breakpoints css design gatsby hook hooks media-queries mediaquery nextjs npm-package pnpm react remix responsive tailwindcss web

Last synced: 15 Dec 2024

https://github.com/aganglada/use-react-media

⚡ react-media with Hooks

hooks media-queries react react-media

Last synced: 15 Jan 2025

https://github.com/jomagene/testimonial-grid

A responsive testimonial grid built with CSS Grid and flex-box, semantic HTML, and Sass/SCSS. Designed to adapt across devices with clean, maintainable code.

flexbox grid-layout media-queries sass

Last synced: 17 Nov 2024

https://github.com/pktcodes/css-basics-projects

Basic Projects using CSS

animation background cascading-style-sheets colors css css-box-model css3 display git john-smilga media-queries position transition typography units

Last synced: 02 Jan 2025

https://github.com/jomagene/four-card-feature-section

A nice layout-based challenge from frontend mentor, to test multi-column and responsive layouts, using Sass, flex and grid

flexbox-grid media-queries sass

Last synced: 17 Nov 2024

https://github.com/divyanshu013/media

Simplify media queries for CSS in JS 💃

css-in-js media-queries

Last synced: 23 Nov 2024

https://github.com/jomagene/meet-landing-page

Responsive Meet landing page built with semantic HTML, Sass, and Flexbox and media querry

flexbox media-queries sass semantic

Last synced: 17 Nov 2024

https://github.com/jomagene/article-preview-component

Responsive and interactive solution to the Frontend Mentor "Article Preview Component" challenge. Built with semantic HTML, Sass/SCSS, and JavaScript, this project features a responsive layout, hover states, and a share button that toggles social media links for an enhanced user experience.

flexbox media-queries querystring sass tooltip

Last synced: 15 Oct 2024

https://github.com/pktcodes/css-basics

CSS Basics

animation background-image colors css-box-model css-variables css3 display float font-awesome john-smilga media-queries position selectors transform transition typography units

Last synced: 02 Jan 2025

https://github.com/evavic44/picture-element

A tutorial for explaining how to use the html picture element

css html html5 media-queries picture picture-element picture-tag tutorial tutorial-code

Last synced: 14 Dec 2024

https://github.com/vighneshdeepweb/react-ui

Modern-UI/UX GTP-3 Website built with react and advanced UI design concepts. Super-friendly for beginners.

gtp-3 media-queries modern-ui react reactjs

Last synced: 12 Jan 2025

https://github.com/svendolin/all-kind-of-webprojects

miscellaneous webprojects using html, css and js + home of some responsive layout projects

css html javascript jquery media-queries responsive responsive-design webproject

Last synced: 20 Jan 2025

https://github.com/bilalahmed804/appleweb

Apple Web frontend

bootstrap5 html-css media-queries

Last synced: 12 Jan 2025

https://github.com/bilalahmed804/salt-n-pepper

bootstrap5 html-css media-queries

Last synced: 12 Jan 2025

https://github.com/bilalahmed804/charity-tamplate

Charity Tamplate frontend

bootstrap5 html-css media-queries

Last synced: 12 Jan 2025

https://github.com/otkazano/russian-travel

Одностраничный сайт с адаптивной версткой - второй учебный проект в Яндекс.Практикуме.

bem-methodology css-animations flexbox grid html5 media-queries

Last synced: 20 Jan 2025

https://github.com/monsara/witcher

HTML layout and styling of a responsive web page with copy code functionality by pressing a button copy code. Web page based on a semantic responsive markup on BEM methodology.

bem css flexbox gulp html javascript media-queries responsive-web-design sass

Last synced: 26 Dec 2024

https://github.com/mk-manishkumar/plant-home-page

This project is a basic UI webpage which is created by using HTML and CSS. It's responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 10 Jan 2025

https://github.com/anandchowdhary/environment-blending

🧖 Get a user's preference using CSS @media(environment-blending)

css environment-blending media-queries typescript

Last synced: 23 Oct 2024

https://github.com/diegoivg98/html-css

Ejercicios/ejemplos del OpenBootcamp

animation-css bootstrap cards css forms html media-queries modal openbootcamp pseudo-classes pseudo-elements responsive sass sass-mixins transitions

Last synced: 19 Dec 2024

https://github.com/saurabhnalepatil/decorative-events

Showcasing his expertise in Event Decoration. Explore a collection of stunning projects and experiences that demonstrate creativity and skill.

angular-cli bootstrap5 css3 emailjs googlefonts html5 media-queries toaster typescript

Last synced: 19 Dec 2024

https://github.com/kenza15a/p2_kenza_filali_livrable

projet 2 booki

css htm media-queries responsive

Last synced: 24 Dec 2024

https://github.com/mahmoudaliaboelhassan/leon-template

The website is a demo of a template called "Leon," designed for businesses or individuals to showcase their products or services. It has a minimalist design with a hero section and several sections highlighting different features.

css css-flexbox font-awesome google-fonts grid-system html media-queries responsive-design transition-animation

Last synced: 03 Jan 2025

https://github.com/Lorellana21/Glamping-landing-page

This is my adaptation of the Module 1`s final test aimed to develop a landing page under a given design and to resolve several points. I have used the project I created as an entrepreneur: Glamping Al-Andalus.

css-animations css-flexbox css-grid css3 homepage html5 landing-page layout media-queries sass transition zeplin

Last synced: 24 Oct 2024

https://github.com/yutahaga/vue-media-breakpoints

A plugin of Vue that store current viewport size name.

media-queries vue vue-plugin

Last synced: 10 Dec 2024

https://github.com/adriwco/gridblog

Layout responsivo utilizando propriedades do Grid Layout.

css github-pages grid-layout html landing-pages media-queries

Last synced: 04 Dec 2024

https://github.com/katherinakulinich/layout_____bakery

Landing page 🥐 Bakery 🥖

adaptive-layouts bakery-website flexbox html-css layout media-queries sass sass-mixins scss

Last synced: 15 Jan 2025

https://github.com/kor1k/job_contact-lights-web

offer from Yaroslav (Contact Lights)

adaptive css frontend html landing media-queries offer website

Last synced: 09 Dec 2024

https://github.com/kumarabhishek/react-mql

CSS Media Queries HOC and MediaContext for React

javascript media-queries reactjs

Last synced: 13 Dec 2024

https://github.com/narendrakoya999/product-preview-card-component

This is A Product Preview Card Component Project Using HTML5 and CSS3

css3 css3-flexbox html5 media-queries

Last synced: 28 Nov 2024

https://github.com/narendrakoya999/3-column-card-component

This is A 3-column Card Component Project using HTML and CSS

css3 css3-flexbox html5 media-queries

Last synced: 28 Nov 2024

https://github.com/narendrakoya999/stats-preview-card-component

This is A Stats Preview Card Component Project using HTML5 and CSS3

css3 css3-flexbox html5 media-queries

Last synced: 28 Nov 2024

https://github.com/pedro-donoso/frontend-mentor

desafío frontend mentor; Utilizo flexbox para secciones responsivas, agrego efecto a la imagen, utilizo fuentes y aplico media queries para ajustar a pantallas móviles

css3 flexbox html5 media-queries

Last synced: 26 Nov 2024

https://github.com/narendrakoya999/freecodecamp-projects-html-css-rwd

This Repository contains a List of Frontend Development Projects using HTML, CSS provided by freeCodeCamp

accessibility css3 es6 html5 javascript media-queries performance responsive-web-design

Last synced: 28 Nov 2024

https://github.com/narendrakoya999/newsletter-card

This is A Newsletter Card Project using HTML5 and CSS3

css3 css3-flexbox html5 media-queries

Last synced: 28 Nov 2024

https://github.com/mk-manishkumar/crypto-landing-page

A basic UI webpage which is fully responsive and created by HTML and CSS

css-grid css3 html5 media-queries

Last synced: 10 Jan 2025

https://github.com/mk-manishkumar/digital-marketing-home-page

A basic UI webpage which is fully responsive and created by HTML and CSS

css-grid css3 html5 media-queries

Last synced: 10 Jan 2025

https://github.com/wadiebenabdouh/rockstar-games-clone

Rockstar Games website clone using pure HTML, Javascript and SCSS

accessibility css functions gaming gta5 html javascript media-queries npm parcel-bundler responsive-design rockstargames scss

Last synced: 22 Dec 2024

https://github.com/webmural/wall

@webmural wall template featuring empty HTML wall with responsive CSS including color mode media queries with @s9a style

css html media-queries plantilla responsive template templates

Last synced: 01 Dec 2024

https://github.com/jxareas/cinemates

A Modern Website consuming the TMDb API powered by Boostrap + Angular.

angular angular-cli angular-material angular2 animations bootstrap client-side component-driven-development eslint media-queries prettier responsive-design responsive-web-design sass tmdb-api typescript user-experience user-interface yarn

Last synced: 22 Nov 2024

https://github.com/mk-manishkumar/product-home-page

This project is a basic UI webpage which is created by using HTML and CSS. It's responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 10 Jan 2025

https://github.com/mk-manishkumar/developer-landing-page

This project is a basic UI webpage which is created by using HTML and CSS. It's fully responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 10 Jan 2025

https://github.com/mk-manishkumar/interior-design-landing-page

This project is a Interior Design Webpage which is created by using HTML and CSS. It's responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 10 Jan 2025

https://github.com/nathan-i-martin/react-ui-breakpoints

Easily add media breakpoints to your react project

dynamic-web dynamic-website media-queries npm react react-hooks typescript

Last synced: 18 Jan 2025

https://github.com/mk-manishkumar/saas-landing-page

This project is a SAAS Landing Webpage which is created by using HTML and CSS. It's fully responsive.

css-flexbox css-grid css3 html5 media-queries

Last synced: 10 Jan 2025

https://github.com/anandchowdhary/prefers-reduced-transparency

🎞️ Get a user's transparency preference

css media-queries prefers-reduced-transparency typescript

Last synced: 23 Oct 2024

https://github.com/rudradcruze/leader-board

This project is basically based on gird and flex box. Simple multiple columns layout.

css3 flex-box grid html5 media-queries responsive

Last synced: 13 Dec 2024

https://github.com/manishrb21/foodfiestabackend

Powerful frontend website

database html-css-javascript media-queries mysql php

Last synced: 21 Nov 2024

https://github.com/pushpendra-1697/onboarding

This React onboarding project includes pages for login, signup, home, and profile functionalities, catering to user authentication and navigation, facilitating a seamless design experience.

dom-manipulation fixel-based-analysis fonts html-css-javascript jsx-syntax localstorage media-queries react-components react-router-dom reactjs

Last synced: 06 Jan 2025

https://github.com/pushpendra-1697/adobe-xd-assignment

This React onboarding project includes pages for login, signup, home, and profile functionalities, catering to user authentication and navigation, facilitating a seamless design experience.

dom-manipulation html-css-javascript jsx-syntax localstorage media-queries react-components react-router-dom reactjs

Last synced: 06 Jan 2025

https://github.com/ericrovell/svelte-media-observer

SvelteJS media queries observer.

media-queries observable observer svelte sveltejs sveltekit

Last synced: 04 Jan 2025

https://github.com/cba85/simple-flexbox-navbar

A bootstrap-like simple navigation bar using only CSS flexbox and media queries.

css flexbox media-queries navbar

Last synced: 15 Jan 2025

https://github.com/osamaayub/learning-journal

Responsive Design Solo Project Learning Journal

css3 html5 media-queries

Last synced: 17 Jan 2025

https://github.com/narendrakoya999/order-summary-component

This is A Order Summary Component Project using HTML5 and CSS3

css3 css3-flexbox html5 media-queries

Last synced: 28 Nov 2024

https://github.com/narendrakoya999/react.js-interview-questions-list

This Repository contains List of Frontend Development Interview Questions

css3 es6 html5 javascript jsx media-queries reactjs redux responsive-web-design

Last synced: 28 Nov 2024

https://github.com/mpopv/pxsmlx

A Sass mixin library for concisely generating sets of single-property media queries

bootstrap-breakpoints breakpoint breakpoints css css3 media-queries mixin-library mixins sass sass-library sass-mixins scss scss-library scss-mixin scss-mixins

Last synced: 06 Dec 2024

https://github.com/bredalis/mediaqueries

✨ Responsive pages ✨

css frontend html media-queries responsive responsive-design responsive-web-design

Last synced: 14 Jan 2025

https://github.com/enes9103/js_recap_hit_the_mole

css3 html5 javascript media-queries

Last synced: 22 Dec 2024

https://github.com/brigand/react-with-viewport

This high order component provides the viewport size to the child in an efficient ways.

media-queries react

Last synced: 21 Nov 2024

https://github.com/creativoma/travel-journal

css3 html5 javascript media-queries react vercel vitejs

Last synced: 24 Dec 2024

https://github.com/octet-stream/tailwindcss-device

TailwindCSS plugin to add variants for input device detection using `@media` queries

media-queries postcss tailwindcss tailwindcss-plugin

Last synced: 14 Jan 2025

https://github.com/kirang89/css-mediaquery

Parses and determines if a given CSS Media Query matches a set of values. This is a port of https://github.com/ericf/css-mediaquery.

css css-mediaquery media-queries python

Last synced: 27 Dec 2024

https://github.com/github-dev12345/education-website-project

👌🚀 Finally Make a Education Website For Foreign Language ( Japanase-Language ) Used ✌️SASS/SCSS ( Nesting ) & HTML5 😊( Semantic Code or DOM Structure ), CSS3 ( Flex-Box )

css-flexbox eductional html5-css3 japanese-language-learners media-queries nesting responsive-layout responsive-web-design sass-framework scss-framework website

Last synced: 05 Jan 2025

https://github.com/dm-zhuk/goit-markup-hw-06

Media query

css3 html5 media-queries

Last synced: 29 Dec 2024

https://github.com/pandiaraj-22/portfolio

This is my portfolio for responsive in all device's

css3 html javascript media-queries

Last synced: 16 Jan 2025

https://github.com/rudradcruze/world-cup

This project is about simple world cup projects with multiple articles and matches with responsive. Live Site:

css3 flexbox grid html5 media-queries responsive transition

Last synced: 13 Dec 2024

https://github.com/martapolii/www.polishchukart.com

This is a personal project built for a Toronto-based artist. The site showcases a gallery of his artwork, a CV highlighting his exhibitions, and contact information. The site uses HTML, CSS, and JavaScript for responsive design, gallery overlays, and mobile navigation.

css frontend gallery-images gallery-overlay html javascript media-queries mobile-navigation responsive-design web-development

Last synced: 13 Jan 2025

https://github.com/felipefama/fylo-landing-page-with-two-column-layout

fylo landing page with two column layout solution front end mentor

css-flex css-grid css-grid-layout css3 frontend-mentor frontendmentor-challenge frontendmentorchallenge html-css-javascript html5 javascript media-queries responsive-layout semantic

Last synced: 07 Dec 2024

https://github.com/rfabreu/fptv-webfeatures

Official repository for the website of FPTV, a television channel. It contains the source code for the website's features and user interface, designed for a seamless viewing experience. This repository serves as a platform for collaboration, version control, and improvement of the FPTV website.

engeneering front-end-development glassmorphism html-css-javascript media media-queries streaming television television-stations television-studios webdevelopment website