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-05-11 00:17:38 UTC
JSON Representation

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

CSS - Projects

css3 html5 media-queries responsive-design

Last synced: 09 Apr 2025

https://github.com/mujahidbcs92/ifza-intvtask

Promo landing page using html, css, js and for responsive only media quries.

css css-flexbox css-grid css-grid-layout css3 html javascript media-queries

Last synced: 22 Mar 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: 25 Mar 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: 25 Mar 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: 25 Mar 2025

https://github.com/shahid-97-ahamed/shahid-protfolio

my-webpage

css3 html5 media-queries

Last synced: 19 Feb 2025

https://github.com/etcdigital/atomic-css

Atmc provides a reusable html styling process, eliminating any duplication of styles and minimizing on demand, reducing about 70% of the CSS weight. Styles are automatically added to the page without any additional effort.

css-atomic-elements css-in-js css-in-react css-prefix css3 keyframes media-queries

Last synced: 05 Mar 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: 16 Mar 2025

https://github.com/survi218/html5_projects

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

Last synced: 16 Mar 2025

https://github.com/shabinx30/weather-app

api css html javascript media-queries

Last synced: 06 Apr 2025

https://github.com/gabyfutemma/kitten

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

css3 grid html5 media-queries

Last synced: 22 Mar 2025

https://github.com/beanloop/react-with-media

React HOC for watching media queries.

higher-order-component media-queries

Last synced: 23 Feb 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: 25 Mar 2025

https://github.com/oge-dev/googleclone

A clone of Google's homepage using HTML and CSS would consist of a minimalist design featuring a central search bar with rounded edges, a simple logo above it, and aligned buttons below, all centered on a plain white background.

css html material-icons media-queries

Last synced: 01 Apr 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: 20 Feb 2025

https://github.com/sandhya80/tsunami_coffee

media queries

developer-tools html-css media-queries

Last synced: 09 Apr 2025

https://github.com/sandhya80/respclub_website

Independent project

css-flexbox css-grid css3 html5 media-queries responsive-design

Last synced: 09 Apr 2025

https://github.com/manu-karenite/cricket-at-fingers

breakpoint css3 dom-manipulation es6-javascript html5 localstorage media-queries responsive-web-design

Last synced: 22 Mar 2025

https://github.com/banupriya1719/htmlcssresponsive

HTML,CSS using media query TASK

css html media-queries

Last synced: 09 Apr 2025

https://github.com/dimitribouteille/sass-no-duplicate-breakpoints

Sass no duplicate breakpoints est une librairie Sass qui permet de regrouper les points de rupture.

css media-queries responsive responsive-css sass sass-library sass-mixins

Last synced: 05 Apr 2025

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

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

media-queries responsive-design rocketseat-fullstack-course

Last synced: 05 Mar 2025

https://github.com/pedrodevvv/landing-page-ktm

Landing page usando um evento da KTM como inspiração

css flexbox html ktm media-queries

Last synced: 07 Apr 2025

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

Landing page challenge from Rocketseat with responsive layout added

challenge media-queries mobile-navigation responsive rocketseat

Last synced: 09 Apr 2025

https://github.com/ushihiraga/scss-media-queries

SCSS Media Queries Mixins

media-queries mixins scss

Last synced: 04 Apr 2025

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

css media-queries responsive

Last synced: 29 Mar 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: 04 Apr 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: 05 Mar 2025

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

media-queries

Last synced: 14 Mar 2025

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: 04 Apr 2025

https://github.com/bodnya29179/ngx-responsive-if

📱 ngx-responsive-if – Conditional rendering based on media queries.

angular conditional-rendering directive media-queries ngx-responsive-if responsive typescript ui

Last synced: 16 Mar 2025

https://github.com/eltonsantos/indecor

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

css3 html5 media-queries

Last synced: 28 Feb 2025

https://github.com/gobimahato/skilled-e-learning

A challege from Frontend Mentor.

css3 custom-properties flex-grid html5 media-queries

Last synced: 24 Feb 2025

https://github.com/damiieibikun/loan-application

A simple Loan Application

conditional-statements css-grid dom-manipulation eventlisteners flex form-validation functions javascript media-queries

Last synced: 05 Mar 2025

https://github.com/fernandabitten/space-cream

💻 📱 Page developed with html css

css-animations css-grid css3 css3-animations html5 media-queries

Last synced: 09 Apr 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: 05 Mar 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: 05 Mar 2025

https://github.com/damiieibikun/libro-clone

Colorlib Libro Clone

css-animations grid-layout html5 jquery jquery-animation media-queries

Last synced: 05 Mar 2025

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

Simple Project built by javascript | Practice project

css3 html javascript media-queries

Last synced: 16 Mar 2025

https://github.com/praveenkumar8754/project1

to create a travel landing website using HTML,CSS

css3 html5 media-queries

Last synced: 16 Mar 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: 28 Feb 2025

https://github.com/hardikaz/dicegame

This is a game of dice. Responsive and functioning.

css html javascript media-queries

Last synced: 28 Feb 2025

https://github.com/ndf-web-dev/professional-portfolio

HTML, CSS, AND Bootstrap responsive template for a professional portfolio.

bootstrap bootstrap-template css flexbox html media-queries portfolio portfolio-website responsive-design responsive-layout responsive-web-design template

Last synced: 20 Feb 2025

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

Static Personal Website

bootstrap5 css html5 javascript media-queries personal-website

Last synced: 27 Feb 2025

https://github.com/sohomsaha/tindog

In this project I had used HTML5,CSS,BOOTSTRAP and MEDIA QUERIES

bootstrap4 css html5 media-queries

Last synced: 22 Mar 2025

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

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

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

css html javascript media-queries

Last synced: 20 Feb 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: 28 Feb 2025

https://github.com/grayturtle01/google-front-end

Google Search Front-End Implementation

css flexbox html javascript media-queries responsive-design

Last synced: 04 Apr 2025

https://github.com/ayush-97techyboy/ez_assg_fe

A resoinsive one page UI without using BootStrap with the help of API.

css-flexbox css-grid css3 html5 javascript media-queries reactjs

Last synced: 20 Mar 2025

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

This project is about simple photography equipments and blogs.

css3 grid html5 media-queries responsive

Last synced: 31 Mar 2025

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

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

Home Rental Landing Page using Sass, a grid layout, and responsive design.

bem-css bem-methodology bem-naming css css-grid css3 grid-layout media-queries npm-scripts responsive responsive-web-design sass scss

Last synced: 29 Mar 2025

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

Calculadora de Gorjeta

css git github html javascript media-queries

Last synced: 01 Mar 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: 01 Mar 2025

https://github.com/dorigonbruno/citacao

Gerador de frases

css git github html javascript media-queries

Last synced: 01 Mar 2025

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

Gerador de Paleta de Cores

css git html javascript media-queries

Last synced: 01 Mar 2025

https://github.com/dorigonbruno/blog_codelandia

Blog_Codelândia-01

css git github html javascript media-queries

Last synced: 01 Mar 2025

https://github.com/dorigonbruno/formulario

Formulário de Contato

css git html javascript media-queries

Last synced: 01 Mar 2025

https://github.com/dorigonbruno/galeria

Galeria

css git html javascript media-queries

Last synced: 01 Mar 2025

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

Gerador de CPF

css git github html javascript media-queries

Last synced: 01 Mar 2025

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: 29 Mar 2025

https://github.com/webwithaman/classroom-project-7-by-sheryians

Color Clash: Test Your Luck is a fun and interactive web game where users generate a random target color and shuffle through colors to match it, testing their luck. Built using JavaScript and DOM manipulation, the game features dynamic color changes, sound effects for an engaging experience.

css html5 javascript js media-queries responsive-design

Last synced: 27 Mar 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: 20 Mar 2025

https://github.com/cabosmanuel/batata-bit-mobile

Batatabit website project (HTML+CSS)

css html media-queries mobile-first responsive scroll-snap

Last synced: 06 Apr 2025

https://github.com/rupanguvi/landing-page

Landing page design

css3 html5 media-queries

Last synced: 01 Mar 2025

https://github.com/cabosmanuel/grid-food

Grid Food, responsive grid website

css grid html media-queries responsive

Last synced: 06 Apr 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: 17 Feb 2025

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

Travel Company Landing Page using Sass, a float layout, and advanced responsive design.

bem-css bem-methodology bem-naming clearfix css css-animations css-architecture css-float css3 float media-queries npm-scripts responsive responsive-web-design sass sass-architecture sass-mixins sass-variables scss

Last synced: 29 Mar 2025

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

world-cup

css3-animations html media-queries

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

https://github.com/krgauravsk/create-dynamic-form

Create a Dynamic Form

media-queries react-hooks reactjs

Last synced: 18 Feb 2025

https://github.com/mohamedsanosy/nataliapnk

🚀 Welcome to my GitHub! Here, I thrive on embracing 💡 new tech challenges and crafting seamless user experiences. 💻☕ Fueled by coffee, I see every line of code as an opportunity ✨ to make the web better 🌐!

css flexbox grid html javascript media-queries react redux responsive-web-design

Last synced: 24 Feb 2025

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: 29 Mar 2025

https://github.com/foramghoghari08/restaurant_website

Restaurant Website

css html javascript media-queries

Last synced: 06 Apr 2025

https://github.com/amokorankye/personal-portfolio-website

Welcome to my portfolio. Explore my work, get in touch, and learn more about my journey in the tech industry.

html-css javascript media-queries

Last synced: 06 Apr 2025

https://github.com/tawounfouet/road-to-frontend-mastery

Documenty my fronte-end learning journey

ajax api css html html-css-javascript javascript media-queries responsive

Last synced: 24 Feb 2025

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

This is my first Resposive Website

bootstrap css3 flexbox html5 media-queries

Last synced: 01 Mar 2025

https://github.com/dimamirana/omnifood

A fully responsive website designing using html5, css3, media-query, ajax

css3-animations css3-transitions html5 jquery media-queries

Last synced: 02 Apr 2025

https://github.com/prasad-k-s/chair-shop

CSS responsive design project.

css-grid css-grid-layout css3 html5 media-queries responsive responsive-design responsive-layout

Last synced: 01 Mar 2025

https://github.com/prasad-k-s/trillo

CSS Flexbox project.

css-animations css3 flexbox html5 media-queries resposive-design scss

Last synced: 01 Mar 2025

https://github.com/gustavogss/instagram-clone

Tela inicial do site do Instagram - Html e Css

css3 flexbox html5 media-queries

Last synced: 21 Mar 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: 03 Mar 2025

https://github.com/sofi-bel/russian-travel

A landing page about Traveling in Russia.

adaptive-design adaptive-layouts bem css3 figma flexbox grid html5 media-queries mobile-first pug relative-units responsive-design responsive-layout responsive-web-design scss semantic-layout web-accessibility webpack webpack5

Last synced: 11 Mar 2025

https://github.com/mohamedsaid225/mealify-

Mealify is a stunning, responsive webpage that supports dark mode.

css css-pseudo-classes css-transforms css-transitions css-variables css3-animations flexbox html media-queries responsive-web-design semantic-tags vendor-prefix

Last synced: 01 Mar 2025

https://github.com/uzmakh/promotional-task_4

Responsive Web Design, KodeCamp-4.0

css3 display flexbox html5 media-queries position responsive-web-design

Last synced: 01 Mar 2025

https://github.com/uzmakh/fcc-piano

Responsive Web Design Lesson-11

media-queries pseudo-selectors responsive-design

Last synced: 01 Mar 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: 01 Mar 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: 01 Mar 2025

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

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

css-flexbox css3 html5 media-queries

Last synced: 21 Mar 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