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-01 00:18:17 UTC
- JSON Representation
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/kento75/website-design-learn
css3 grid-layout html5 media-queries
Last synced: 19 Dec 2024
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: 19 Dec 2024
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: 19 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: 19 Dec 2024
https://github.com/ashishsingh-30/temporarytest
OneInsure Task
css media-queries reactjs redux shadcn-ui tailwindcss typescript vitejs
Last synced: 19 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
