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/sgcm14/0523C02-heroes-maquetado

Practicando maquetación y estilos

box-sizing css flexbox-css html5 media-queries position

Last synced: 21 Nov 2024

https://github.com/dracudev/s1.1-html-css-flex

Sprint to practice HTML and CSS.

animations-css css3 html5 it-academy media-queries

Last synced: 05 Feb 2025

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

world-cup

css3-animations html media-queries

Last synced: 25 Jan 2025

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

Last synced: 25 Jan 2025

https://github.com/archana-nagaraj/frontend-mentor---3-column-preview-card-component

Frontend Mentor challenge to design a 3-column preview card component using HTML and CSS. Used grid for layouts and media queries for covering various dimensions.

css frontend-mentor html media-queries

Last synced: 13 Jan 2025

https://github.com/sgcm14/0523c02-heroes-maquetado

Practicando maquetación y estilos

box-sizing css flexbox-css html5 media-queries position

Last synced: 29 Jan 2025

https://github.com/ameyjoshi0209/mealmate

Mealmate is an innovative system designed to automate and streamline attendance tracking for messes and cafeterias using unique QR code generation.

bootstrap composer css3 html5 javascript jquery media-queries mysql-database php phpmyadmin qrcode-generator xampp-server

Last synced: 26 Jan 2025

https://github.com/mesbol6647/net.wash-dry

NetWash&Dry Checkout App is a basic level web application(for educational purposes) that allows users to add and remove carpet cleaning products from their cart and calculate the total amount

css css-flexbox css3 dom-manipulation html5 javascript media-queries

Last synced: 22 Dec 2024

https://github.com/mesbol6647/html-css-projects

This repository contains some small-scale, basic level projects I worked on when I first started learning HTML and CSS.

css-flexbox css-grid css-grid-template css3 html-template html5 media-queries

Last synced: 22 Dec 2024

https://github.com/wadiebenabdouh/s.s.s-food

a restaurant webiste testing.

css flexbox html media-queries

Last synced: 22 Dec 2024

https://github.com/wadiebenabdouh/product-details

front end mentor quiz

css frontend frontend-mentor html media media-queries responsive-design sass

Last synced: 22 Dec 2024

https://github.com/carevicm/css-projects

CSS - Projects

css3 html5 media-queries responsive-design

Last synced: 22 Dec 2024

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: 09 Feb 2025

https://github.com/sauloroman/nucleus-landingpage

Landing Page about a fictional credit card with a responsive design

bem-methodology css flexbox grid html media-queries

Last synced: 30 Jan 2025

https://github.com/sauloroman/sunnyside-landingpage

Responsive web side about an artistic company.

bem-methodology css html javascrtipt media-queries menu-mobile

Last synced: 30 Jan 2025

https://github.com/sauloroman/omnifood-landingpage

This is a landing page about a start-up which offers food plans.

css desktop-first flexbox-css grid-layout html javascript media-queries responsive-design

Last synced: 30 Jan 2025

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: 09 Feb 2025

https://github.com/performance13/goit-markup-hw-08

Homework №8 on technical skills. (Adaptive Web Design. Responsive graphics)

adaptive-design breakpoint density developer-tools device-independent-pixels device-pixel functions hardware-pixel logical-operators max-width media-queries media-types mobile-first mobile-first-css overriding pixel-density responsive-design retina screen-resolution viewport

Last synced: 29 Jan 2025

https://github.com/danfalcon225/responsive_hamburger_menu

Responsive Hamburger Menu with HTML, CSS, & JavaScript

css hamburger-menu html javascript media-queries responsive

Last synced: 29 Jan 2025

https://github.com/pedroreves/stats-card-preview

Stats Card Preview Website | FrontEnd Mentor Challenge

bem css css3 flexbox html html5 media-queries responsive

Last synced: 31 Dec 2024

https://github.com/iwatanikenji/rocket-nfts

Landing page challenge from Rocketseat with responsive layout added

challenge media-queries mobile-navigation responsive rocketseat

Last synced: 23 Dec 2024

https://github.com/iwatanikenji/metidation-landing-page

Landing page with responsive layout

forms media-queries mobile-navigation responsive

Last synced: 23 Dec 2024

https://github.com/akramadjab/ecommerce-website

Full stack e-commerce app built using vanilla javascript and commece.js api

api babeljs bem-methodology commercejs css-animations css-flexbox css-grid css3 html5 javascript javascript-es6 javascript-vanilla media-queries parcel parcel-bundler sass scss scss-mixins scss-modules

Last synced: 16 Jan 2025

https://github.com/aldamayorgadev/learning-responsive-web-design

Ejemplos de uso de Media Queries para el responsive web design.

css html media-queries responsive-web-design

Last synced: 23 Dec 2024

https://github.com/jacobgrisham/flexbox-layout-with-responsive-design

Hotel Listing Info Page using Sass, a flexbox layout, and responsive design.

bem-css bem-methodology bem-naming css css-animations css-flexbox css3 flexbox media-queries npm-scripts responsive responsive-web-design sass scss

Last synced: 04 Feb 2025

https://github.com/belchenkov/hotel-website

Hotel Website on clean HTML5 & CSS3 and some JS

css3 font-awesome-5 html5 media-queries responsive-design

Last synced: 05 Jan 2025

https://github.com/robson-teixeira/html-frontend-ii-imersao

Repositório do curso Imersão Front-End 2ª Edição da plataforma Alura.

alura angular bem-css css frontend html html5 imersao-alura imersaoalura imersaoalura-dev imersaodev javascript json-server media-queries reset-css spotify

Last synced: 09 Feb 2025

https://github.com/surendravidiyala/html5_projects

api boilerplate css fancybox html5 javascript jquery media-queries responsive-design semantic-ui

Last synced: 26 Jan 2025

https://github.com/byteyard/fluidsizingcss

FluidSizingCSS is a pure CSS solution for responsive design, offering fluid sizing locks for seamless scaling across devices. It eliminates the need for external tools, enabling developers to create adaptable, lightweight, and fast interfaces with native CSS.

adaptive-design css fluid-sizing media-queries native-css responsive-design scaling web-development

Last synced: 05 Nov 2024

https://github.com/matviyroman/resass

Mixins for checking device by width and height (width, min-width, max-width, height, min-height, max-height) or group of devices (mobile, tablet, laptop, desktop) or device by name (iPhone 5, iPhone X, iPhone 11 Pro Max, iPad Pro 12.9, etc). Expandable and very simple for usage.

css frontend media-queries mq resass sass sass-mediascreen scss scss-mediascreen

Last synced: 05 Jan 2025

https://github.com/coderboy-raiyan/landing-template

Landing-template using pure CSS. Without any frameworks. And It's fully mobile & tablet responsive.

css3 flexbox html5 media-queries

Last synced: 17 Jan 2025

https://github.com/coderboy-raiyan/football-website

Responsive football website with pure css and html.

css3 flexbox html5 media-queries

Last synced: 17 Jan 2025

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

Static Personal Website

bootstrap5 css html5 javascript media-queries personal-website

Last synced: 10 Jan 2025

https://github.com/sashkhen/shu-cv

Personal CV project

clsx css-modules css-variables cv dark-mode gh-pages media-queries momentjs react react-qr-code responsive typescript vite web

Last synced: 05 Feb 2025

https://github.com/rudradcruze/influencer-gear

This project is about simple photography equipments and blogs.

css3 grid html5 media-queries responsive

Last synced: 06 Feb 2025

https://github.com/imix-dkz/js-excercises

HTML5-Js-Examples

bootsrap css html5 media-queries typescript

Last synced: 17 Jan 2025

https://github.com/kenyosaenzrojas/checkout

css flexbox grid-layout html media-queries responsive

Last synced: 09 Feb 2025

https://github.com/leydev/freelance-isifid

Nesse freelance o site para Isifid foi construido com base em um arquivo .psd fornecido pelo contratante.

bootstrap4 css3 html5 jquery media-queries psd-to-html

Last synced: 10 Jan 2025

https://github.com/irynadidkivska/yummypug

A website with favourite sweets

adaptive-layouts css3 flexbox-css html5 media-queries

Last synced: 24 Dec 2024

https://github.com/akramadjab/3-column-preview-card-component

A simple 3-column preview card component code challenge to Frontend Mentor

animation animation-css animations bem bem-css bem-methodology css css-animations css-flexbox css-grid html media-queries responsive-design responsive-layout sass sass-mixins scss scss-mixins

Last synced: 01 Jan 2025

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

A simple Order Summary component code challenge to Frontend Mentor using Flexbox, Animation, and Hover state

animation animation-css animations bem bem-css bem-methodology css css-animations css-flexbox html media-queries responsive-design

Last synced: 01 Jan 2025

https://github.com/achalesh27022003/techdoc

This project is part of FCC curriculum and has responsive, descriptive and bookmarks use in technical writing of CSS

bookmarks css css3 cssflexbox documentation html media-queries technical-writing

Last synced: 01 Jan 2025

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/krosscode/elquery

css javascript media-queries web-components

Last synced: 01 Jan 2025

https://github.com/swadeshchisim/influencer-gear

Responsive influencer-gear with HTML5 and CSS3

css3 html5 media-queries

Last synced: 02 Jan 2025

https://github.com/gianmen91/fruit-slot-machine-html-css-js

Welcome to Fruit Slot Machine, a fun and interactive web-based game where players try their luck by spinning fruits! Feel free to explore, select your favorite fruit, and spin for a chance to win!

css font-awesome html javascript media-queries

Last synced: 12 Jan 2025

https://github.com/surjoyday/friends-list

css-flexbox css3 htlm5 media-queries responsive-layout

Last synced: 01 Jan 2025

https://github.com/ajmalfaris11/product-list-react

Smart. is a modern frontend design project showcasing a product list, crafted with React, Bootstrap, and CSS for a sleek, responsive user interface. This repository highlights efficient rendering and dynamic data handling, making it ideal for e-commerce platforms and product showcase websites.

boostarp css frontend map media-queries react responsive-design usestate-hook

Last synced: 25 Dec 2024

https://github.com/anjupriya-v/quote-generator

Random Quote Generator

css html javascript js media-queries quote-generator-app

Last synced: 23 Jan 2025

https://github.com/muhammadaliashraf/grumpy_bear_town

Grumpy Bear Town: A whimsical and charming single-page website that transports you to a world of grumpy bears and their daily adventures. Explore delightful illustrations, funny anecdotes, and interactive elements that capture the spirit of these lovable but grumpy characters. Dive into Grumpy Bear Town and experience a bear-y good time!

css-flexbox css3 front-end htm-css html html-website landing-page landingpage media-queries muhammadaliashraf resposive-design single-page-app website-development websitedesign

Last synced: 26 Dec 2024

https://github.com/mahmoudaliaboelhassan/portfolio-website

This website is a portfolio of My work as a frontend developer. It showcases My Skills in HTML, CSS, and JavaScript through engaging and visually appealing designs.

css-flexbox css3 date font-awesome google-fonts grid-system html5 javascript media-queries transition

Last synced: 03 Jan 2025

https://github.com/mahmoudaliaboelhassan/tasks-list

This project is a task list web application designed to help users keep track of their daily tasks. The project uses HTML, CSS, and JavaScript to create a visually appealing and interactive interface

alert css-flexbox css3 font-awesome google-fonts html5 js json local-storage media-queries object-oriented-programming regular-expression

Last synced: 03 Jan 2025

https://github.com/kurooo-yamiii/pst-monitoring-management-system

PHP Native - Javascript - XML - Ajax - SQL PhpyMyAdmin - JS Library - Media Query - PDO

javascript jquery media-queries pdo-mysql php-native phpmyadmin sql xml

Last synced: 23 Jan 2025

https://github.com/kurooo-yamiii/quickstash-inventory-management-sytem

PHP Native - Javascript - Ajax - JS Library - RESTFUL API - Laboratory Inventory System - SQL

ajax javascript js-library media-queries php-native phpmyadmin restful-api sql

Last synced: 23 Jan 2025

https://github.com/matheusfdosan/responsive-project-with-sass

Esse projeto é uma mistura de dois Masterclass, o #08 que usamos estratégias de unidades de medidas do CSS, para que tanto o nosso Layout, quanto os nossos textos, e Media Queries para que fiquem responsivos. Já o #15, é a introdução ao SASS, onde coloco em prática tais ensinamentos.

dom git github html javascript media-queries responsive-design sass

Last synced: 04 Jan 2025

https://github.com/matheusfdosan/codeflix

Um projeto muito simples, onde é possível o usuário adicionar cards de filmes.

animation-css css dom git github html javascript media-queries

Last synced: 04 Jan 2025

https://github.com/matheusfdosan/login-screen-cursoemvideo

Uma tela de login, utilizando formulários em HTML e Media Queries.

css cursoemvideo forms git githb html media-queries

Last synced: 04 Jan 2025

https://github.com/kopepasah/sass-media-query-stack

Sass mixin which builds media queries, from simple to complex.

media-queries media-query sass sass-mixins

Last synced: 17 Jan 2025

https://github.com/emersoncarneirodasilva/projeto-box-shadow-generator

Projeto de um gerador de sombras, facilitando na produção de projetos front-end como uma ferramenta de fácil manuseio.

box-shadow css dom-manipulation flexbox html javascript media-queries

Last synced: 18 Jan 2025

https://github.com/eltonsantos/indecor

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

css3 html5 media-queries

Last synced: 11 Jan 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: 11 Jan 2025

https://github.com/dorigonbruno/formulario

Formulário de Contato

css git html javascript media-queries

Last synced: 11 Jan 2025

https://github.com/dorigonbruno/jordanshoes_codelandia

JordanShoes - Segundo desafio completado da codelândia, projeto feito com HTML CSS e JavaScript, totalmente responsivo.

bootstrap5 css git github html javascript media-queries

Last synced: 11 Jan 2025

https://github.com/dorigonbruno/calcular-gorjeta

Calculadora de Gorjeta

css git github html javascript media-queries

Last synced: 11 Jan 2025

https://github.com/dorigonbruno/gerador-de-cores

Gerador de Paleta de Cores

css git html javascript media-queries

Last synced: 11 Jan 2025

https://github.com/dorigonbruno/galeria

Galeria

css git html javascript media-queries

Last synced: 11 Jan 2025

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

A responsive article preview component built with HTML, SCSS, and JavaScript, featuring interactive share buttons and mobile-first design.

flexbox frontend-mentor frontendmentor-challenge html javascript media-queries scss web-development

Last synced: 07 Feb 2025

https://github.com/khizarwakeel/my-first-responsive-website

This is my first Resposive Website

bootstrap css3 flexbox html5 media-queries

Last synced: 12 Jan 2025

https://github.com/khizarwakeel/tresmindtask

This is task from Tresmind Solution

bootstrap5 css3 flexbox html5 javascript media-queries netlify-deployment responsive-design

Last synced: 12 Jan 2025

https://github.com/khizarwakeel/html-css-hackathon

Module 1 Hackathon by Sir Ghous Ahmed (SMIT) Batch 11 2024

bootstrap5 css3 hackathon html5 media-queries

Last synced: 12 Jan 2025

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

This repository presents the course project 'HTML and CSS: Working with Responsiveness and Project Deployment' on Alura

css html media-queries relative-units responsive-layout

Last synced: 18 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/stefanoconsonni/fylo-landing-page

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. I have also added specific favicons for android and apple devices.

css html javascript media-queries responsive-design

Last synced: 12 Jan 2025

https://github.com/pijusp/7-sign-up2

Responsive HTML and CSS sign-up form

css3 html5 media-queries responsive

Last synced: 07 Feb 2025

https://github.com/sunilbrown89/web-engage

web-engage-Task

communication css email-template html javascript media-queries

Last synced: 12 Jan 2025

https://github.com/davealdon/advanced-tailwind

Advanced Tailwind Techniques for Interesting Use-Cases

media-queries nextjs react tailwind tailwind-css tailwindcss typescript

Last synced: 07 Feb 2025

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

Article Preview Component build with HTML CSS Vanilla JavaScript

bem css flexbox html javascript javascript-vanilla media-queries

Last synced: 24 Jan 2025

https://github.com/oppahero/card-feature-section

Four Card feature section build with HTML and CSS

bem css css-flexbox css-grid html media-queries mobile-first

Last synced: 24 Jan 2025

https://github.com/oppahero/social-links-profile

Social links profile made with HTML and CSS

css flexbox frontend-mentor html5 media-queries mobile-first-workflow

Last synced: 24 Jan 2025

https://github.com/oppahero/recipe-page

Recipe page build with HTML and CSS

css css-reset flexbox html media-queries

Last synced: 24 Jan 2025

https://github.com/msarmadqadeer/news-page

This is a static news page that I created using HTML5 and CSS3.

css3 html5 media-queries static-page

Last synced: 19 Jan 2025

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

Simple landing page using HTML & bootstrap5

bootstrap5 css github-pages html javascript media-queries

Last synced: 19 Jan 2025

https://github.com/mayarajaques/projeto-travelgram-v2.0

3º desafio desenvolvido com os conhecimentos adquiridos no módulo de responsividade do curso Fullstack da Rocketseat. Neste projeto adaptei a página utilizando Media Queries para desktop e mobile

css html media-queries

Last synced: 25 Jan 2025

https://github.com/mendjoy/teste_mediaqueries

Projeto criado durante o curso de HTML5 e CSS do Cursoemvideo, para estudo do conceito de MOBILE FIRST e media Queries.

css html media-queries mobile

Last synced: 24 Jan 2025

https://github.com/dmitrymalakhov/media-breakpoints-watcher

Library for easy use of media breakpoints in js

breakpoints css-in-js media media-queries

Last synced: 24 Jan 2025

https://github.com/arakakimath/shoplist

Sixth Challenge of the Rocketseat Fullstack course. In this challenge, the author had to develop a responsive website with html and css. Then, he had to add some Javascript interactions to dynamically add and remove elements according to user's needs.

html-css javascript media-queries responsive-website

Last synced: 07 Feb 2025

https://github.com/sourav-cse-dev/fitness

Created a responsive landing page design, used HTML and CSS, where I have applied Flex-box, Grid, Media Query, and some Optimizations.

css figma flexbox grid html media-queries responsive-web-design uiux-design webdesign webdevelopment

Last synced: 25 Jan 2025

https://github.com/daun/mq-observer

Simple media query observer

css javascript media-queries

Last synced: 31 Jan 2025

https://github.com/justinlucky/techfarming_client

This is the Frontend side of my website for my startup idea called TechFarming. Built with lot of effort.

css-animations css-flexbox css3 media-queries react-chatbot-kit react-icon-kit react-router react-styled-components reactjs responsive-web-design scss-styles

Last synced: 01 Feb 2025

https://github.com/sofiane-abou-abderrahim/html-css-basics-webfood-responsive-website

I built a responsive website and turned this desktop only-page into an adaptive mobile and desktop website, which looks good on all devices.

adaptive-web-design css3 desktop-first em html5 internal-links media-queries mobile-first pixel pourcentage rem responsive-web-design target-selection units user-preferences

Last synced: 09 Feb 2025

https://github.com/sofiane-abou-abderrahim/react-course-goals

I dived in and React.js and built a small course goals demo from scratch! I used Reactjs, Hooks, Conditional & Dynamic Styles, Styled Components, Dynamic Props, CSS Modules, Dynamic Inline Styles, Dynamic CSS Classes, Media Queries and way more!

conditional-styling css-modules dynamic-css-classes dynamic-inline-styles dynamic-props dynamic-styles media-queries react react-components react-hooks reactjs styled-components