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 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.
Here are 2,003 public repositories matching this topic...
third sprint- unit 1- responsive design
-
Updated
Mar 31, 2018 - HTML
Cree una página web que muestre un paisaje y un gatito diferentes a medida que la ventana del navegador se hace más pequeña.
-
Updated
May 2, 2018 - CSS
Nueva versión de mi página web. Espero que sea de su agrado.
-
Updated
Feb 3, 2018 - HTML
Portfolio Site
-
Updated
Jul 6, 2018 - JavaScript
Use native CSS media queries to customize component props
-
Updated
Jul 16, 2020 - TypeScript
My solution for the Google Mobile Web Specialist Nanodegree, including all three stages. No JS or CSS framework used. Only ES6, Flexbox, Media Queries, PWA with Service Workers and IndexedDB 🎓
-
Updated
Sep 3, 2018 - JavaScript
-
Updated
Jun 4, 2018 - CSS
Weather Now - See the current weather forecast for your location
-
Updated
Feb 5, 2022 - CSS
Brief example of using mostly fluid responsive design pattern
-
Updated
May 14, 2020 - HTML
Initial webpage for a service to welcome companies in Berlin
-
Updated
Aug 19, 2019 - CSS
CSS Media queries are supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+, as well as on smartphones and other screen-based devices.
-
Updated
Jan 9, 2019
This project is part of FCC curriculum and has responsive, descriptive and bookmarks use in technical writing of CSS
-
Updated
Oct 2, 2020 - HTML
A zuri internship task on page responsiveness with media quries.
-
Updated
Apr 9, 2021 - CSS
Хакатон, работа в команде вместе со студентами факультета дизайна и разработчиками
-
Updated
Feb 6, 2021 - HTML
-
Updated
Feb 17, 2021 - JavaScript
TerreDeGeek site de vente de produits téléphoniques et informatiques
-
Updated
Apr 1, 2022 - CSS
Created by Håkon Wium Lie, W3C
Released June 19, 2012
- Followers
- 5 followers
- Website
- drafts.csswg.org/mediaqueries
- Wikipedia
- Wikipedia