Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 @media and @import at-rules
target specific media for the <style>, <link>, <source>, and other HTML elements with the media= attribute
test and monitor media states using the Window.matchMedia() and EventTarget.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: 2024-11-04 00:18:22 UTC
JSON Representation

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: 21 Oct 2024

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: 12 Oct 2024

https://github.com/codemonk-digital/react-responsiveness

Responsiveness in React made easy.

bootstrap3 bootstrap4 bootstrap5 bulma media-queries reactjs responsiveness ssr tailwindcss

Last synced: 02 Nov 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: 29 Oct 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: 29 Oct 2024

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: 11 Oct 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: 05 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