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-05-11 00:17:38 UTC
- JSON Representation
https://github.com/georginapuig/popconvert
slot machine and video modal
casino-games css hooks media-queries modal popup react react-components reactjs responsive-design slot-machine
Last synced: 29 Mar 2025
https://github.com/nadim-nion/2nd-assignment
This is a responsive website for all devices e.g. Desktop, Mobile, Tablet etc. I have used HTML5, CSS3 and Media queries to build the whole website.
css html media-queries responsive
Last synced: 26 Feb 2025
https://github.com/kreliannn/burger-shop-webiste
A responsive static website for a burger shop, designed for an engaging user experience on mobile and desktop devices.
Last synced: 14 Apr 2025
https://github.com/afek-sakaju/colored-shape-redux
This project is a user-friendly React and Redux-based application that allows for creating custom designs with a diverse selection of shapes and color options.
eslint javascript media-queries reactjs redux sass vite
Last synced: 08 Mar 2025
https://github.com/akshayone8/responsive-dashboard
Responsive Dashboard
css html5 javascript media-queries responsive-web-design
Last synced: 27 Mar 2025
https://github.com/javidrashkhansoi/responsive-value
SCSS function responsive-value. It is intended to handle responsive CSS property values without using media queries.
adaptive css function generator license media-queries media-query media-query-breakpoints mit mit-license responsive sass sass-function scss scss-function snippets vscode vscode-snippets
Last synced: 15 Mar 2025
https://github.com/mrbrunelli/css-flexbox
Meus estudos sobre flexbox, heranças com nth-child e media queries
css flexbox media-queries nth-child
Last synced: 05 Mar 2025
https://github.com/mu-senpai/gamer-zone
A gaming website landing page using HTML5 and vanilla CSS3 with responsive features for two different types of devices.
Last synced: 07 Apr 2025
https://github.com/mu-senpai/fitness
A responsive landing page for a gym using HTML5, vanilla CSS3 and its media query feature to make the landing page responsive.
Last synced: 07 Apr 2025
https://github.com/sgcm14/0523c02-petshop-maquetado
Landing de petshop
css flexbox-css htlm5 media-queries
Last synced: 15 Mar 2025
https://github.com/ranjeet2311/multi-layered-image-gallery
NodeJs, ExpressJs, Java script/jQuery, Ajax, Media query, Html, Css, Scss,
ajax-call css endpoints expressjs html5 jquery jquery-ajax media-queries nested-loops nodejs-server scss-styles serverside-rendering
Last synced: 14 Mar 2025
https://github.com/mohammed19200/carswebsite
a cars website you can view and rent a car and prices are per day . its easy to view and use and responsive for any device you use.
api bootstrap css css3 figma html html5 media-queries react-hooks react-router reactjs
Last synced: 07 Apr 2025
https://github.com/candytale55/tsunami_coffee
Static CSS & HTML Codecademy exercise . The purpose of this project is to edit an existing Tsunami Coffee website code using relative units and responsive web design so that the website appears correctly on varying screen sizes.
clearfix codecademy media-queries responsive-design tsunami-coffee
Last synced: 31 Mar 2025
https://github.com/candytale55/paint_store
HTML5 & CSS3 - This is a project for improving a color-rich web page for a fake home paint business. The webpage displays info about using color in a home and color swatches with varying lightness, saturation, and hue. Uses transparencies and media queries.
codecademy css-color css3 html5 media-queries paint-store transparency
Last synced: 31 Mar 2025
https://github.com/candytale55/innovation_cloud
Innovation conference HTML5 & CSS3 landing page. Codecademy project for studying CSS anatomy. Uses media queries and changes in color with transition on :hover elements.
codecademy css3 html5 innovation-company landing-page media-queries practice-project
Last synced: 31 Mar 2025
https://github.com/candytale55/broadway
HTML5 + CSS3 static landing page for fake design firm - Codecademy practice project for CSS rules for displaying and positioning elements on web pages.
broadway codecademy css3 html5 media-queries practice-project
Last synced: 31 Mar 2025
https://github.com/shakibosd/rezwanul-hoque-vai-er-deya-task-code
ClanBook Web Design
css html javascript media-queries
Last synced: 15 Mar 2025
https://github.com/hemants1703/results-summary-component-frontend-mentor
A Summary of Results as a Component frontend development practice
css css3 html html5 media-queries responsive-design
Last synced: 15 Mar 2025
https://github.com/dracudev/html-css-flex
Project to practice HTML and CSS.
animations-css css3 html5 media-queries
Last synced: 30 Mar 2025
https://github.com/saakeeb/odami-course
A Single Page Application for online learning web-app demo
bootstrap4 css eventhandlers font-awesome media-queries reactjs reactjs-components useeffect-hook usestate-hook
Last synced: 18 Feb 2025
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: 13 Mar 2025
https://github.com/ibrahimalsabr/elzero-template
This is a project for creating Elzero Template using HTML and CSS.
background-image css css-animations css-flexbox css-grid hover-effects html media-queries responsive-design
Last synced: 27 Mar 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: 05 Mar 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: 05 Mar 2025