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-12 00:18:27 UTC
- JSON Representation
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/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/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/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 Jan 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: 24 Jan 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: 22 Jan 2025
https://github.com/mikeludemann/dynamic-media-queries
A dynamic media-queries styling method for all dimensions
Last synced: 02 Feb 2025
https://github.com/fatihycan/query-media
css3 flexbox html5 media-queries responsive-design
Last synced: 16 Jan 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/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/abdulmoiz34/password-generator
Simple Project built by javascript | Practice project
css3 html javascript media-queries
Last synced: 23 Jan 2025
https://github.com/praveenkumar8754/project1
to create a travel landing website using HTML,CSS
Last synced: 23 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: 30 Jan 2025
