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
@mediaand@importat-rules - target specific media for the
<style>,<link>,<source>, and other HTML elements with themedia=attribute - test and monitor media states using the
Window.matchMedia()andEventTarget.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-06 00:17:51 UTC
- JSON Representation
https://github.com/ranjeet2311/multi-layered-image-gallery
NodeJs, ExpressJs, Java script/jQuery, Ajax, Media query, Html, Css, Scss,
ajax-call css endpoints expressjs html5 jquery jquery-ajax media-queries nested-loops nodejs-server scss-styles serverside-rendering
Last synced: 14 Mar 2025
https://github.com/kreliannn/burger-shop-webiste
A responsive static website for a burger shop, designed for an engaging user experience on mobile and desktop devices.
Last synced: 14 Apr 2025
https://github.com/nadim-nion/2nd-assignment
This is a responsive website for all devices e.g. Desktop, Mobile, Tablet etc. I have used HTML5, CSS3 and Media queries to build the whole website.
css html media-queries responsive
Last synced: 26 Feb 2025
https://github.com/lilymilano/landing-page-responsive-html-css-aug2922
Building a responsive e-learning landing page. HTML and CSS with media queries.
Last synced: 26 Feb 2025
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: 03 Mar 2025
https://github.com/codemonk-digital/react-responsiveness
Responsiveness in React made easy.
bootstrap3 bootstrap4 bootstrap5 bulma media-queries reactjs responsiveness ssr tailwindcss
Last synced: 07 Apr 2025
https://github.com/style-forge/media
A comprehensive CSS library with predefined media queries for desktop, tablet, mobile, portrait, and landscape layouts. Ideal for creating responsive and consistent designs with ease.
breakpoints consistent css design desktop frontend html landscape lightweight media-queries mobile modular portrait responsive responsive-design styles styling tablet utilities web-development
Last synced: 26 Feb 2025
https://github.com/mosalem149v2/staff-dish-booking-management_debi-task
A comprehensive web application for managing staff roles, dishes, and table bookings for a restaurant. This project includes functionalities for adding, editing, and deleting staff roles and dishes, checking the restaurant's operating status, managing daily specials, and tracking customer bookings.
application-development css3 customer-management frontend-development html5 javascript media-queries responsive restaurant-management user-interface web-development
Last synced: 04 Mar 2025
https://github.com/xmasuhai/nav-1
预览请点击：
bootcdn figma hashtable iconfont iconfonts jquery json-parser localstorage media-queries scss
Last synced: 26 Feb 2025
https://github.com/sumaiyabanu15/css-project
This page Is about Travel Landing Page - Using HTML & CSS
Last synced: 26 Feb 2025
https://github.com/pedrodevvv/alpha-host
Projeto de hospedagem de sites, desenvolvido com o objetivo de treinar a responsividade, neste projeto foi trabalhado apenas a parte de estrutura e estilização.
css-flexbox css3 html-css media-queries responsive-web-design
Last synced: 07 Apr 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: 30 Mar 2025
https://github.com/devhonufa/responsive-football
Responsive website-blog page
css3 flexbox-css gird-layout html5 media-queries
Last synced: 04 Apr 2025
https://github.com/yashi-singh-1/piano-using-html-and-css
a responsive piano interface using HTML and CSS, exploring media queries and pseudo selectors for screen size adaptability. Dive into responsive web development fundamentals while building an engaging project!
css css3 front-end frontend frontend-development github html html-css html5 media-queries open-source pseudo-selectors pseudocode responsive-design responsive-web-design web-development
Last synced: 24 Feb 2025
https://github.com/panxitus/hospital_v.4
Escalonamiento Proyecto Sitio Web Hospital /media queries
7-1architecture bem-methodology css3 html5 media-queries mobile responsive-design sass
Last synced: 07 Apr 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: 23 Mar 2025
https://github.com/namonaki0/fe-mentor-nft-preview-card
Frontend Mentor - NFT Preview Card
html media-queries responsive-design scss
Last synced: 05 Mar 2025
https://github.com/namonaki0/fe-mentor-base-apparel-coming-soon
Frontend Mentor - Base Apparel Coming Soon Page
frontend-mentor html javascript keyframes media-queries responsive-design scss
Last synced: 05 Mar 2025
https://github.com/namonaki0/fe-mentor-huddle-landing-page
Frontend Mentor - Huddle Landing Page
flexbox html media-queries mobile-first-workflow scss
Last synced: 05 Mar 2025
https://github.com/georginapuig/popconvert
slot machine and video modal
casino-games css hooks media-queries modal popup react react-components reactjs responsive-design slot-machine
Last synced: 29 Mar 2025
https://github.com/afek-sakaju/colored-shape-redux
This project is a user-friendly React and Redux-based application that allows for creating custom designs with a diverse selection of shapes and color options.
eslint javascript media-queries reactjs redux sass vite
Last synced: 08 Mar 2025
https://github.com/akshayone8/responsive-dashboard
Responsive Dashboard
css html5 javascript media-queries responsive-web-design
Last synced: 27 Mar 2025
https://github.com/javidrashkhansoi/responsive-value
SCSS function responsive-value. It is intended to handle responsive CSS property values without using media queries.
adaptive css function generator license media-queries media-query media-query-breakpoints mit mit-license responsive sass sass-function scss scss-function snippets vscode vscode-snippets
Last synced: 15 Mar 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: 05 Mar 2025
https://github.com/mu-senpai/gamer-zone
A gaming website landing page using HTML5 and vanilla CSS3 with responsive features for two different types of devices.
Last synced: 07 Apr 2025
https://github.com/mu-senpai/fitness
A responsive landing page for a gym using HTML5, vanilla CSS3 and its media query feature to make the landing page responsive.
Last synced: 07 Apr 2025
https://github.com/sgcm14/0523c02-petshop-maquetado
Landing de petshop
css flexbox-css htlm5 media-queries
Last synced: 15 Mar 2025
https://github.com/mohammed19200/carswebsite
a cars website you can view and rent a car and prices are per day . its easy to view and use and responsive for any device you use.
api bootstrap css css3 figma html html5 media-queries react-hooks react-router reactjs
Last synced: 07 Apr 2025
https://github.com/candytale55/tsunami_coffee
Static CSS & HTML Codecademy exercise . The purpose of this project is to edit an existing Tsunami Coffee website code using relative units and responsive web design so that the website appears correctly on varying screen sizes.
clearfix codecademy media-queries responsive-design tsunami-coffee
Last synced: 31 Mar 2025
https://github.com/candytale55/paint_store
HTML5 & CSS3 - This is a project for improving a color-rich web page for a fake home paint business. The webpage displays info about using color in a home and color swatches with varying lightness, saturation, and hue. Uses transparencies and media queries.
codecademy css-color css3 html5 media-queries paint-store transparency
Last synced: 31 Mar 2025
https://github.com/candytale55/innovation_cloud
Innovation conference HTML5 & CSS3 landing page. Codecademy project for studying CSS anatomy. Uses media queries and changes in color with transition on :hover elements.
codecademy css3 html5 innovation-company landing-page media-queries practice-project
Last synced: 31 Mar 2025
https://github.com/candytale55/broadway
HTML5 + CSS3 static landing page for fake design firm - Codecademy practice project for CSS rules for displaying and positioning elements on web pages.
broadway codecademy css3 html5 media-queries practice-project
Last synced: 31 Mar 2025
https://github.com/shakibosd/rezwanul-hoque-vai-er-deya-task-code
ClanBook Web Design
css html javascript media-queries
Last synced: 15 Mar 2025
https://github.com/hemants1703/results-summary-component-frontend-mentor
A Summary of Results as a Component frontend development practice
css css3 html html5 media-queries responsive-design
Last synced: 15 Mar 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: 05 Mar 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: 05 Mar 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: 20 Feb 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: 03 Mar 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: 01 Mar 2025
https://github.com/stuartdaniells/responsive_layouting
Link to view:
css flexbox grid html media-queries viewport
Last synced: 31 Mar 2025
https://github.com/fido1hn/fem-3-column-preview-card-component-main
Repo for my solution to Frontend Mentors challenge 3 column preview card
Last synced: 07 Apr 2025
https://github.com/rosines-almeida/kitten
Laboratoria - Sprint 3 - Challenge: make images fit the screen size
Last synced: 15 Mar 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: 27 Feb 2025
https://github.com/europa1613/resproject
Responsive Web Design from Scratch
css media-queries responsive-design
Last synced: 15 Mar 2025
https://github.com/coderboy-raiyan/football-website
Responsive football website with pure css and html.
css3 flexbox html5 media-queries
Last synced: 09 Mar 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: 17 Mar 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: 17 Mar 2025
https://github.com/imix-dkz/js-excercises
HTML5-Js-Examples
bootsrap css html5 media-queries typescript
Last synced: 09 Mar 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: 15 Mar 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: 09 Mar 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: 09 Mar 2025
https://github.com/mayen007/palmstar
The central hub for Palmstar's tour company website code, assets, and resources.
bootstrap5 framework inspiration javascript media-queries responsive tourism tourism-experiences tourism-website traveling
Last synced: 08 Apr 2025
https://github.com/mayen007/product-preview-card-component
A responsive product preview card component solution for the Frontend Mentor challenge. Built using HTML, CSS, and responsive images, this project features a clean and minimal design. It includes mobile-first styling, custom fonts with @font-face, hover effects, and media queries for an optimal user experience on different devices.
beginner beginner-code beginner-friendly card css-flexbox html-css media-queries
Last synced: 08 Apr 2025
https://github.com/mayen007/social-links-profile
Social profile links
css-flexbox css3 media-queries profile-card
Last synced: 08 Apr 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: 02 Mar 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: 04 Mar 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: 04 Mar 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: 05 Mar 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: 05 Mar 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: 17 Mar 2025
https://github.com/mikeludemann/dynamic-media-queries
A dynamic media-queries styling method for all dimensions
Last synced: 28 Mar 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.
Last synced: 18 Mar 2025
https://github.com/prajwalpt/image-containers
The MovieMania is a webpage which shows the upcoming movies list using their posters. The webpage is made using Bootstrap 5.3 so that the users will be more attentive to the poster designs.
bootstrap5 css3 html5 media-queries
Last synced: 24 Mar 2025
https://github.com/mena-erian/fokir
Fokir is a personal portfolio website designed as a training project for CSS. It focuses on styling and layout techniques to create a visually appealing design.
css3 cssvariables display-flex html5 media-queries purecss
Last synced: 24 Mar 2025
https://github.com/saidul-m-khan/responsive-football-website
https://saidul-m-khan.github.io/Responsive-Football-Website/index.html
css3 flexbox grid-layout html5 media-queries responsive-layout responsive-web-design
Last synced: 31 Mar 2025
https://github.com/saidul-m-khan/leader-board
https://saidul-m-khan.github.io/leader-board/
css3 flexbox grid-layout html5 media-queries
Last synced: 31 Mar 2025
https://github.com/daxchen/sass-respond-to
A sass mixin to write media queries with ease!
media-queries mixin respond-to sass
Last synced: 08 Apr 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: 24 Mar 2025
https://github.com/sgcm14/0523c02-heroes-maquetado
Practicando maquetación y estilos
box-sizing css flexbox-css html5 media-queries position
Last synced: 24 Mar 2025
https://github.com/jmgogo/basic-webdev
A sandbox repository containing static web development files. 🗄️
Last synced: 12 Apr 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: 24 Mar 2025
https://github.com/shashisahani/webjokes
"Web Jokes" is a delightful website offering a collection of humorous content. With a clean design, users can click the "Next Joke" button for a quick laugh, accompanied by a playful loading indicator. The simple interface ensures a fun and user-friendly experience.
css functions html javascript media-queries
Last synced: 27 Feb 2025
https://github.com/shashisahani/eventcode
key event : press any key from keyboard like(a,b,c,d...etc)it will show you keycode and code
css html javascript media-queries
Last synced: 27 Feb 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: 01 Apr 2025
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/davealdon/advanced-tailwind
Advanced Tailwind Techniques for Interesting Use-Cases
media-queries nextjs react tailwind tailwind-css tailwindcss typescript
Last synced: 01 Apr 2025
https://github.com/david-voss/product-page-template
Responsive product page template - originally created for eBay listings of 3D printed miniatures. Fully optimised for desktop, tablet and mobile use.
css-flexbox css-grid css3 ebay frontend html5 media-queries product-info product-page responsive-design website-template
Last synced: 01 Apr 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: 09 Apr 2025
https://github.com/wadiebenabdouh/s.s.s-food
a restaurant webiste testing.
css flexbox html media-queries
Last synced: 09 Apr 2025
https://github.com/wadiebenabdouh/product-details
front end mentor quiz
css frontend frontend-mentor html media media-queries responsive-design sass
Last synced: 09 Apr 2025
https://github.com/carevicm/css-projects
CSS - Projects
css3 html5 media-queries responsive-design
Last synced: 09 Apr 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/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.
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/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/banupriya1719/htmlcssresponsive
HTML,CSS using media query TASK
Last synced: 09 Apr 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
