CSS3 Media Queries

Media queries are an extension of the media type property that was part of the CSS2 specification. They allow you to check for width and height (of the browser window), device width and height, orientation, and resolution of target screens. As part of the CSS3 specification, you can use media queries to ensure that specific style sheets apply to specific devices and / or screen resolutions, providing the best experience regardless of where the content is being viewed.
CSS3 Media Queries
the expressive web

Minimum Browser Support:

CSS3 Media Queries
56.7%
Percentage of users who can view this feature (source: caniuse.com)

Examples

  • Colly

    Uses CSS Media Queries to adapt layout depending on screen and device resolution.

  • Web Designer Wall

    Leverages CSS Media Queries to reflow content depending on screen resolution and orientation.

Feature Detection

Modernizr has support for detecting whether a specific media query is true in the current browser state. In cases where media queries are not supported by the browser, Modernizr.mq() will always return false.
var queryToTest = "only all and (max-width: 400px)";

if(Modernizr.mq(queryToTest)) {
   //the query is true
}

Learn more about detecting feature support with Modernizr.

Fallback Strategies

When running content in a browser that does not support media queries, you will need to use JavaScript to dynamically change the content based on the browser / device you are running in.

css3-mediaqueries-js is a JavaScript libraries which enables media queries in a number of browsers which do not natively support them.

Related Adobe Technologies