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-01-21 00:13:49 UTC
- JSON Representation
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
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/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/article-preview-component
Article Preview Component build with HTML CSS Vanilla JavaScript
bem css flexbox html javascript javascript-vanilla media-queries
Last synced: 24 Nov 2024
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 Nov 2024
https://github.com/oppahero/recipe-page
Recipe page build with HTML and CSS
css css-reset flexbox html media-queries
Last synced: 24 Nov 2024
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 Nov 2024
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 Nov 2024
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 Nov 2024
https://github.com/mikeludemann/dynamic-media-queries
A dynamic media-queries styling method for all dimensions
Last synced: 07 Dec 2024
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/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: 03 Dec 2024
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 Nov 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 Nov 2024
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: 22 Nov 2024
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/sauloroman/sunnyside-landingpage
Responsive web side about an artistic company.
bem-methodology css html javascrtipt media-queries menu-mobile
Last synced: 03 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/praveenkumar8754/project1
to create a travel landing website using HTML,CSS
Last synced: 22 Nov 2024
https://github.com/mayarajaques/projeto-travelgram-v2.0
Projeto 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 Nov 2024
https://github.com/carevicm/css-projects
CSS - Projects
css3 html5 media-queries responsive-design
Last synced: 22 Dec 2024
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: 03 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: 03 Dec 2024
https://github.com/odiegosilva1/ui-clone
Google UI clone made with HTML and CSS 3.
clone css3 html5 media-queries ui-design
Last synced: 26 Nov 2024
https://github.com/surendravidiyala/html5_projects
api boilerplate css fancybox html5 javascript jquery media-queries responsive-design semantic-ui
Last synced: 26 Nov 2024
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: 02 Dec 2024
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: 27 Nov 2024
https://github.com/sgcm14/0523c02-heroes-maquetado
Practicando maquetación y estilos
box-sizing css flexbox-css html5 media-queries position
Last synced: 02 Dec 2024
https://github.com/danfalcon225/responsive_hamburger_menu
Responsive Hamburger Menu with HTML, CSS, & JavaScript
css hamburger-menu html javascript media-queries responsive
Last synced: 02 Dec 2024
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/gustavogss/instagram-clone
Tela inicial do site do Instagram - Html e Css
css3 flexbox html5 media-queries
Last synced: 28 Nov 2024
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: 28 Nov 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
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: 09 Dec 2024
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: 09 Dec 2024
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: 05 Dec 2024
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: 05 Dec 2024
https://github.com/davealdon/advanced-tailwind
Advanced Tailwind Techniques for Interesting Use-Cases
media-queries nextjs react tailwind tailwind-css tailwindcss typescript
Last synced: 12 Jan 2025
https://github.com/gitusergb/myyoutube
This web application is a clone of YouTube, built using React JS and Material UI.
material-ui media-queries rapidapi react
Last synced: 11 Dec 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: 11 Dec 2024
https://github.com/coderboy-raiyan/landing-template
Landing-template using pure CSS. Without any frameworks. And It's fully mobile & tablet responsive.
css3 flexbox html5 media-queries
Last synced: 17 Jan 2025
https://github.com/coderboy-raiyan/football-website
Responsive football website with pure css and html.
css3 flexbox html5 media-queries
Last synced: 17 Jan 2025
https://github.com/soorajvp/soorajvp.github.io
Static Personal Website
bootstrap5 css html5 javascript media-queries personal-website
Last synced: 10 Jan 2025
https://github.com/sashkhen/shu-cv
Personal CV project
clsx css-modules css-variables cv dark-mode gh-pages media-queries momentjs react react-qr-code responsive typescript vite web
Last synced: 12 Dec 2024
https://github.com/zoobereq/secret-agent-supply
Project developed for Codecademy Intensive "Build Websites from Scratch". Utilizes HTML5, CSS3 + Flexbox, Media queries, and responsive design
codecademy codecademy-intensive css css3 flexbox flexbox-css flexbox-grid html-css html5 media-queries responsive-design responsive-web-design
Last synced: 17 Dec 2024
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: 17 Dec 2024
https://github.com/imix-dkz/js-excercises
HTML5-Js-Examples
bootsrap css html5 media-queries typescript
Last synced: 17 Jan 2025
https://github.com/kenyosaenzrojas/checkout
css flexbox grid-layout html media-queries responsive
Last synced: 17 Dec 2024
https://github.com/kenyosaenzrojas/results-summary-component
css flexbox grid-layout html media-queries responsive
Last synced: 17 Dec 2024
https://github.com/kenyosaenzrojas/frontend-simple-coffee
css fetch-api flexbox html javascript media-queries
Last synced: 17 Dec 2024
https://github.com/leydev/freelance-isifid
Nesse freelance o site para Isifid foi construido com base em um arquivo .psd fornecido pelo contratante.
bootstrap4 css3 html5 jquery media-queries psd-to-html
Last synced: 10 Jan 2025
https://github.com/irynadidkivska/yummypug
A website with favourite sweets
adaptive-layouts css3 flexbox-css html5 media-queries
Last synced: 24 Dec 2024
https://github.com/akramadjab/3-column-preview-card-component
A simple 3-column preview card component code challenge to Frontend Mentor
animation animation-css animations bem bem-css bem-methodology css css-animations css-flexbox css-grid html media-queries responsive-design responsive-layout sass sass-mixins scss scss-mixins
Last synced: 01 Jan 2025
https://github.com/akramadjab/order-summary-component
A simple Order Summary component code challenge to Frontend Mentor using Flexbox, Animation, and Hover state
animation animation-css animations bem bem-css bem-methodology css css-animations css-flexbox html media-queries responsive-design
Last synced: 01 Jan 2025
https://github.com/achalesh27022003/techdoc
This project is part of FCC curriculum and has responsive, descriptive and bookmarks use in technical writing of CSS
bookmarks css css3 cssflexbox documentation html media-queries technical-writing
Last synced: 01 Jan 2025
