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/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/sgcm14/0523c02-petshop-maquetado

Landing de petshop

css flexbox-css htlm5 media-queries

Last synced: 22 Jan 2025

https://github.com/rimshasajid436/facebook

Create Responsive Facebook Clone For CSS Final Task..

box-shadow cursor flex media-queries

Last synced: 16 Jan 2025

https://github.com/hardikaz/dicegame

This is a game of dice. Responsive and functioning.

css html javascript media-queries

Last synced: 11 Jan 2025

https://github.com/boakaidorborkamara/responsive-registration-form-

Understanding Responsiveness and Media Queries

media-queries

Last synced: 24 Jan 2025

https://github.com/sumaiyabanu15/css-project

This page Is about Travel Landing Page - Using HTML & CSS

css html5 media-queries

Last synced: 09 Jan 2025

https://github.com/arpit-shrivastva/useability-hub-webpage

Experience the sleek and responsive design of our Usability Hub webpage, meticulously crafted with HTML, CSS, and media queries. Navigate seamlessly across devices as our website adapts effortlessly to different screen sizes, ensuring a user-friendly experience on desktops, tablets, and smartphones.

css html media-queries responsive

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

https://github.com/fatihycan/product-card

css3 font-awesome google-fonts html5 media-queries responsive-web-design

Last synced: 16 Jan 2025

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

css html javascript media-queries

Last synced: 30 Dec 2024

https://github.com/mehmet-github06/password-genarator

This is a simple web application that allows users to generate secure passwords with various options for customization.

html-css-javascript media-queries notyfication responsive-design

Last synced: 16 Jan 2025

https://github.com/mehmet-github06/guess01

This is a simple web application. The game involves the user trying to guess a randomly selected number within a specific range (between 0 and 100).

flex html-css-javascript media-queries responsive sound

Last synced: 16 Jan 2025

https://github.com/mehmet-github06/travel-app

This project is a simple web interface designed for a travel site using HTML, CSS - SASS and JS.

flexbox html-css-javascript media-queries responsive sad

Last synced: 16 Jan 2025

https://github.com/mehmet-github06/informative-web-page

This is a simple informative web page template showcasing various sections such as navigation, posts, and developer's features.

css3 flex html5 media-queries responsive

Last synced: 16 Jan 2025

https://github.com/mehmet-github06/transistor-website

TRANSİSTOR is a website that showcases various courses and information sessions.

animation css3 flex html5 media-queries

Last synced: 16 Jan 2025

https://github.com/mehmet-github06/to-do-list

This is a simple web application that allows users to create and manage a to-do list. Users can enter tasks they want to add, mark completed tasks, and remove tasks from the list.

flex html-css-javascript media-queries responsive

Last synced: 16 Jan 2025

https://github.com/mehmet-github06/sport-news-website

This is a simple website template for displaying sports news. It consists of a grid layout showcasing various news articles with images and brief descriptions.

css-grid html5 media-queries responsive

Last synced: 16 Jan 2025

https://github.com/brunonavarrooficial/dsmeta-css

Algoritmo Front-End em HTML e CSS criado para projeto java

css3 flexbox font google google-fonts html5 media-queries tags

Last synced: 30 Dec 2024

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: 30 Dec 2024

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: 30 Dec 2024

https://github.com/tsheporamantso/css-grid-models

In this projects I build 5 CSS-GRID responsive models for Desktop, Tablet and mobile version sampled from Figma

grid-layout html5 media-queries scss-framework

Last synced: 19 Jan 2025

https://github.com/ardywsptr/dicoding-blog

Dicoding blog - Repositori ini merupakan latihan dari materi mobile first approach pada kelas Menjadi Front-End Web Developer Expert di Dicoding

dicoding-academy dicoding-submission grid-layout-library media-queries mobile-first-layout responsive-layout

Last synced: 14 Jan 2025

https://github.com/dorigonbruno/blog_codelandia

Blog_Codelândia-01

css git github html javascript media-queries

Last synced: 11 Jan 2025

https://github.com/dorigonbruno/gerador-cpf

Gerador de CPF

css git github html javascript media-queries

Last synced: 11 Jan 2025

https://github.com/dorigonbruno/teste-lacrei

Teste Lacrei - Teste feito por mim Bruno Dorigon, Usando as tecnologias HTML, CSS, JavaScript. Projeto totalmente responsivo.

css git github html javascript media-queries

Last synced: 11 Jan 2025

https://github.com/dorigonbruno/citacao

Gerador de frases

css git github html javascript media-queries

Last synced: 11 Jan 2025

https://github.com/europa1613/resproject

Responsive Web Design from Scratch

css media-queries responsive-design

Last synced: 22 Jan 2025

https://github.com/rosines-almeida/kitten

Laboratoria - Sprint 3 - Challenge: make images fit the screen size

css grid html5 media-queries

Last synced: 22 Jan 2025

https://github.com/ahmedmitwally77/mealify

Mealify is a responsive web app designed for food lovers who want an easy, elegant way to browse meal options. Built entirely with HTML, CSS, and media queries, Mealify showcases how powerful simple web technologies can be for creating engaging, user-friendly designs across all devices

css3 dark-mode flexbox googlefonts hover html5 media-queries responsive responsive-web-design transition

Last synced: 22 Jan 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/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

Last synced: 13 Jan 2025

https://github.com/chiragaug6/responsive-gallery-css-grid

Here is the HTML and CSS assignment which i have submitted during my Full stack web development course Provided by pwskills.com

css-grid css3 html5 media-queries responsive-layout

Last synced: 14 Jan 2025

https://github.com/chiragaug6/fully-responsive-portfolio-layout

This is a assignment given in "Full Stack web development" course by PWSKILLS, built using HTML5 and CSS3

css3 html5 media-queries responsive-design

Last synced: 14 Jan 2025

https://github.com/damiieibikun/poketo-clone-api

Poketo E-commerce Clone-API

api-rest bootstrap5 clone-website html-css-javascript localstorage media-queries restful-api

Last synced: 15 Jan 2025

https://github.com/damiieibikun/logicaloperations-homepage

Logical Operations Home page Clone

css-animations css-grid css-sass css3 flex grid-template html5 media-queries responsive

Last synced: 15 Jan 2025

https://github.com/xmasuhai/nav-1

预览请点击：

bootcdn figma hashtable iconfont iconfonts jquery json-parser localstorage media-queries scss

Last synced: 09 Jan 2025

https://github.com/namonaki0/fe-mentor-product-preview-card

Frontend Mentor - Product Preview Card Component

css fronetend-mentor-challenge html javascript media-queries responsive-design

Last synced: 15 Jan 2025

https://github.com/namonaki0/fe-mentor-3-column-preview-card

Frontend Mentor - 3 Column Preview Card

css frontend-mentor html media-queries

Last synced: 15 Jan 2025

https://github.com/namonaki0/fe-mentor-interactive-rating

Frontend Mentor - Interactive Rating Component Challenge

frontend-mentor-challenge html javascipt keyframes media-queries responsive-design scsss

Last synced: 15 Jan 2025

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

Product preview card component build with HTML and CSS

css css-reset css-variables flexbox grid hml media-queries mobil-first

Last synced: 24 Jan 2025

https://github.com/oppahero/testimonials-grid-section

Testimonials grid section build with HTML CSS

bem css flex grid html media-queries mobile-first

Last synced: 24 Jan 2025

https://github.com/edijunior88/freecodecamp_principios_do_design_responsivo

Neste curso, você vai aprender a usar CSS para fazer suas páginas ficarem bonitas, não importa em qual dispositivo elas estão sendo visualizadas.

html html5 media-queries

Last synced: 22 Jan 2025

https://github.com/mikeludemann/dynamic-media-queries

A dynamic media-queries styling method for all dimensions

media-queries nodejs

Last synced: 02 Feb 2025

https://github.com/fatihycan/query-media

css3 flexbox html5 media-queries responsive-design

Last synced: 16 Jan 2025

https://github.com/mehmet-github06/password-genarator-2

This is a simple web application where users can generate secure passwords with various customization options.

dom-manipulation html-css-javascript media-queries responsive-web-design

Last synced: 16 Jan 2025

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

Simple Project built by javascript | Practice project

css3 html javascript media-queries

Last synced: 23 Jan 2025

https://github.com/praveenkumar8754/project1

to create a travel landing website using HTML,CSS

css3 html5 media-queries

Last synced: 23 Jan 2025

https://github.com/annal001/deep-dish-pizzeria

A web application of a fictional pizzeria (Deep Dish Pizzeria) that allows users to place order(s) for their pizzas online, in terms of size, type of crust and toppings

bootstrap5 css3 html5 javascript jquery media-queries

Last synced: 21 Jan 2025

https://github.com/vvaldesc/flight-booker

Smart flight booker combining two APIS

airbnb-api ajax-request amadeus-api amadeusbooking await-async callback-functions css fetch-api html5 http-requests javascript media-queries rapidapi recursive-functions responsive-design

Last synced: 18 Jan 2025

https://github.com/noclist/carps-space

carps space is my personal website where I experiment with modern CSS techniques

css css-animations css-custom-properties css-flexbox css-grid css3 eleventy front-matter html html5 media-queries njk nunjucks sass ssg

Last synced: 18 Jan 2025

https://github.com/mediamonks/seng-device-state-tracker

DeviceStateTracker is a utility class that tracks which media query is currently active using the matchMedia API.

javascript media-queries seng typescript

Last synced: 30 Jan 2025

https://github.com/saleh0987/mealify_site

Route_Frontend_Tasks-C43-

css3 html5 media-queries

Last synced: 07 Dec 2024

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/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/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/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/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/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/douglasvolcato/css-media-query-generator

Media Query generator for CSS style.

css css3 front-end front-end-development frontend generator html-css-javascript javascript media-queries vanilla-javascript

Last synced: 16 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/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/eaglestear/first-production-website

A website I developed for a graphic designer - this is currently waiting to be tweaked and can then go live. Uses JS Flickity plugin to power the gallery.

first-client media-queries responsive-web-design web-development

Last synced: 09 Dec 2024