-
Updated
May 22, 2013 - JavaScript
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,021 public repositories matching this topic...
-
Updated
May 23, 2013 - JavaScript
A tiny API wrapper around window.matchMedia
-
Updated
Jan 13, 2016 - JavaScript
Experiment to test the rendering speed of media queries.
-
Updated
Mar 15, 2016 - CSS
School assignment. Focus: Grid system and Media queries.
-
Updated
Apr 19, 2016 - CSS
-
Updated
Jun 22, 2016 - CSS
-
Updated
Nov 21, 2016 - CSS
-
Updated
Feb 13, 2017 - JavaScript
Media Queries is a javascript plugin to define media queries events that launch an event when the screen resolution changes or a screen rotation occurs.
-
Updated
Feb 28, 2017 - HTML
React HOC for watching media queries.
-
Updated
Mar 3, 2017 - TypeScript
Random Quote Machine
-
Updated
Mar 5, 2017 - JavaScript
Make A Web Page Project of INtro to Programming Nanodegree
-
Updated
Mar 20, 2017 - HTML
Injecting javascript into web page in order to execute an AB test. [Created March 16, 2017 ]
-
Updated
Mar 24, 2017 - JavaScript
Portfolio made from scratch that adapts to iPhone, iPad and computer screens
-
Updated
Apr 7, 2017 - CSS
Codecademy Ready Project using Box Model, CSS Display, Flexbox and Media Queries.
-
Updated
Apr 30, 2017 - CSS
Created by Håkon Wium Lie, W3C
Released June 19, 2012
- Followers
- 5 followers
- Website
- drafts.csswg.org/mediaqueries
- Wikipedia
- Wikipedia