Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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-02-14 00:14:15 UTC
- JSON Representation
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/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
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.
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/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: 14 Feb 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: 14 Feb 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/wadiebenabdouh/s.s.s-food
a restaurant webiste testing.
css flexbox html media-queries
Last synced: 14 Feb 2025
https://github.com/wadiebenabdouh/product-details
front end mentor quiz
css frontend frontend-mentor html media media-queries responsive-design sass
Last synced: 14 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/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/ibrahimalsabr/elzero-template
This is a project for creating Elzero Template using HTML and CSS.
background-image css css-animations css-flexbox css-grid hover-effects html media-queries responsive-design
Last synced: 01 Feb 2025
https://github.com/rmoongit/note-balls
NoteBalls! Add and edit your personal notes with vue reactive components! ( if don't work, use vpn for firebase )
bulma-css components composition-api firebase hosting laravel media-queries npm routers slots vue3
Last synced: 01 Feb 2025
https://github.com/iwatanikenji/metidation-landing-page
Landing page with responsive layout
forms media-queries mobile-navigation responsive
Last synced: 15 Feb 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: 15 Feb 2025
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: 08 Feb 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/odiegosilva1/ui-clone
Google UI clone made with HTML and CSS 3.
clone css3 html5 media-queries ui-design
Last synced: 25 Jan 2025
https://github.com/harshitha-2201/weatherapp
This is a weather prediction app using React by using openWeatherApi
api arrow-functions current-timezone hooks html-css-javascript javascript material-ui media-queries openweathermap-api react-weather-app reactjs responsive-web-design search temparature ui-design useeffect-hook usestate-hook weather-forecast
Last synced: 26 Dec 2024
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
Last synced: 09 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/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/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/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/surendravidiyala/html5_projects
api boilerplate css fancybox html5 javascript jquery media-queries responsive-design semantic-ui
Last synced: 26 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/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/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/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/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/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/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/beanloop/react-with-media
React HOC for watching media queries.
higher-order-component media-queries
Last synced: 05 Jan 2025
https://github.com/saakeeb/odami-course
A Single Page Application for online learning web-app demo
bootstrap4 css eventhandlers font-awesome media-queries reactjs reactjs-components useeffect-hook usestate-hook
Last synced: 27 Dec 2024
https://github.com/kenyosaenzrojas/results-summary-component
css flexbox grid-layout html media-queries responsive
Last synced: 09 Feb 2025
https://github.com/kenyosaenzrojas/frontend-simple-coffee
css fetch-api flexbox html javascript media-queries
Last synced: 09 Feb 2025
https://github.com/anandchowdhary/prefers-contrast
🕶️ Check a user's preference using CSS @media(prefers-contrast)
css media-queries prefers-contrast typescript
Last synced: 23 Oct 2024
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: 23 Oct 2024
https://github.com/sofi-bel/how-to-learn
A landing page about educational techniques and statistics in teaching.
adaptive-layouts adaptive-web-design bem css3 flexbox grid html5 media-queries mobile-first pug relative-units responsive-layout responsive-web-design scss semantic-layout web-accessibility webpack webpack5 youtube-api
Last synced: 23 Oct 2024
https://github.com/sofi-bel/mesto-project
A landing page about traveling.
adaptive-layouts bem css3 flexbox grid html5 javascript js media-queries mobile-first pug relative-units responsive-design responsive-layout scss semantic-layout web-accessibility webpack webpack5
Last synced: 23 Oct 2024
https://github.com/anithad1625/howtocss-instaclone
HowToCSS-InstaClone is a simplified Instagram-like social media feed interface built using HTML, CSS, and Bootstrap Icons. It features a responsive design for various screen sizes, a grid-based feed layout, user profiles with profile pictures and usernames, posts with images and captions, and reactions and engagement options such as likes and comme
bootstrap-icons css html media-queries
Last synced: 13 Jan 2025
https://github.com/anandchowdhary/light-level
💡Get a user's light level using CSS @media(light-level)
css light-level media-queries typescript
Last synced: 23 Oct 2024
https://github.com/gunjankadu/edge-ledger
A Fictional Website Markup Using HTML5,CSS3,Flex and Media Queries
css3 flexbox html5 javascript media-queries
Last synced: 05 Jan 2025
https://github.com/krgauravsk/create-dynamic-form
Create a Dynamic Form
media-queries react-hooks reactjs
Last synced: 27 Dec 2024
https://github.com/harisdev-netizen/faqaccordioncard
Frontend Mentor Challenge - FAQ Accordion Card
Last synced: 06 Jan 2025
https://github.com/productmap/russian-travel
Проект: Путешествие по России
bem-methodology css html5 media-queries
Last synced: 01 Jan 2025
https://github.com/gustavogss/instagram-clone
Tela inicial do site do Instagram - Html e Css
css3 flexbox html5 media-queries
Last synced: 26 Jan 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: 26 Jan 2025
https://github.com/pushpendra-1697/kalvium
Draggable & Droppable
html-css-javascript media-queries
Last synced: 06 Jan 2025
https://github.com/rohitchourey0809/my-camera-app
CaptureCam is your go-to camera app for effortless photo and video capture. With intuitive controls and dynamic features, it's designed to enhance your photography experience.
css-flexbox grid-layout media-queries optimization react react-hooks react-webcam
Last synced: 21 Jan 2025
https://github.com/nermfrontdev/practice-index
CSS practice project. Basic HTML file with its tags, in CSS I added a @media (min-width: 1900px) making "Mobile First".
Last synced: 13 Jan 2025
https://github.com/lankaukk/cat-treat-landing-page
Responsive Landing Page for Public Good's cat food Product 🐱
css cssflexbox html-css media-queries
Last synced: 01 Feb 2025
https://github.com/prabhu30/three-column-card-design
This is a challenge project listed on frontend mentor website. I built the project by looking at the design image given.
Last synced: 03 Feb 2025
https://github.com/andresilveira1/space-cream
css grid-layout media-queries variables-css
Last synced: 21 Jan 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: 06 Jan 2025
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: 21 Jan 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: 13 Feb 2025
https://github.com/gabyfutemma/kitten
Laboratoria - Sprint 3 - Challenge: make images fit the screen size
Last synced: 27 Jan 2025
https://github.com/sashapt/the-unique-taste-landing
Landing layout
animation gulp javascript media-queries scss
Last synced: 25 Dec 2024
https://github.com/oleg-putseiko/match-breakpoint
A library of optimized React components and hooks for matching media queries
breakpoint match-media media-queries performance react tailwindcss typescript
Last synced: 03 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: 14 Jan 2025
https://github.com/kento75/website-design-learn
css3 grid-layout html5 media-queries
Last synced: 11 Feb 2025
https://github.com/sanika365/womeni--website
This is Client-side webpage using html and CSS
color-gradients css-icons flexbox-grid flickity footer-css html-css-javascript html-forms media-queries navbar newsletter
Last synced: 08 Jan 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: 11 Feb 2025
https://github.com/swadeshchisim/testimonial-page
Testimonial Page
css3 html5 media-queries responsive-design
Last synced: 02 Jan 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: 30 Dec 2024
https://github.com/talhat298/quader
A responsive web page featuring a full-screen background, Bengali text overlay, and looping audio, prompting the question: "Will all problems be solved just by saying sorry?"
audioapi css3 html5 media-queries responsive-web-design
Last synced: 11 Feb 2025
https://github.com/talhat298/bus-travel
A simple, pure CSS animation featuring a bus and a car traveling across a detailed background. The animation includes moving vehicles with rotating wheels, all designed using only HTML and CSS, without any JavaScript.
Last synced: 11 Feb 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: 07 Jan 2025
https://github.com/ashishsingh-30/temporarytest
OneInsure Task
css media-queries reactjs redux shadcn-ui tailwindcss typescript vitejs
Last synced: 11 Feb 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: 08 Jan 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: 08 Jan 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: 04 Feb 2025
