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/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: 14 Feb 2025
https://github.com/mayen007/social-links-profile
Social profile links
css-flexbox css3 media-queries profile-card
Last synced: 14 Feb 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: 14 Feb 2025
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: 05 Feb 2025
https://github.com/rudradcruze/influencer-gear
This project is about simple photography equipments and blogs.
css3 grid html5 media-queries responsive
Last synced: 06 Feb 2025
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: 09 Feb 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: 14 Feb 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: 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
https://github.com/jmgogo/basic-webdev
A sandbox repository containing static web development files. 🗄️
Last synced: 24 Dec 2024
https://github.com/krosscode/elquery
css javascript media-queries web-components
Last synced: 01 Jan 2025
https://github.com/swadeshchisim/influencer-gear
Responsive influencer-gear with HTML5 and CSS3
Last synced: 02 Jan 2025
https://github.com/surjoyday/friends-list
css-flexbox css3 htlm5 media-queries responsive-layout
Last synced: 01 Jan 2025
https://github.com/ajmalfaris11/product-list-react
Smart. is a modern frontend design project showcasing a product list, crafted with React, Bootstrap, and CSS for a sleek, responsive user interface. This repository highlights efficient rendering and dynamic data handling, making it ideal for e-commerce platforms and product showcase websites.
boostarp css frontend map media-queries react responsive-design usestate-hook
Last synced: 25 Dec 2024
https://github.com/anjupriya-v/quote-generator
Random Quote Generator
css html javascript js media-queries quote-generator-app
Last synced: 23 Jan 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: 26 Dec 2024
https://github.com/mahmoudaliaboelhassan/portfolio-website
This website is a portfolio of My work as a frontend developer. It showcases My Skills in HTML, CSS, and JavaScript through engaging and visually appealing designs.
css-flexbox css3 date font-awesome google-fonts grid-system html5 javascript media-queries transition
Last synced: 03 Jan 2025
https://github.com/mahmoudaliaboelhassan/tasks-list
This project is a task list web application designed to help users keep track of their daily tasks. The project uses HTML, CSS, and JavaScript to create a visually appealing and interactive interface
alert css-flexbox css3 font-awesome google-fonts html5 js json local-storage media-queries object-oriented-programming regular-expression
Last synced: 03 Jan 2025
https://github.com/kurooo-yamiii/pst-monitoring-management-system
PHP Native - Javascript - XML - Ajax - SQL PhpyMyAdmin - JS Library - Media Query - PDO
javascript jquery media-queries pdo-mysql php-native phpmyadmin sql xml
Last synced: 23 Jan 2025
