Responsive Retrofit Mobile

Responsive retrofitting has been defined as as finding the fastest and lowest-risk approach to creating a better experience for users of any screen size.

An issue with this is when a site has such complex styles it would be very difficult to undo for smaller layouts. In this type of situation, you may want to serve mobile first styles to viewport widths leading up to the current site’s fixed with resolution.

The goal with this approach is to have zero impact on the original CSS for larger viewport widths, but to use a mobile-first CSS structure leading up to that resolution without having to undo overly complex styles from the original CSS.

We’re using yepnope.js and Modernizr media query test to check if the UA supports media queries (and has JS enabled). Where it does, we serve the responsive CSS. In the cases where it doesn’t, or when we don’t have JS enabled, we serve the original CSS.

Media Query Syntax

Media query syntax follows this syntax:

The not keyword (which is optional) negates the query, effectively saying “If the following is not true, apply these styles.” The not keyword negates, the entire query, so:

evaluates as:

and not as:

The only keyword forces just those browsers that support CSS3 media queries to evaluate the query. In essence, it conceals the CSS from older browsers:

The type refers to the media type, such as print, handheld, screen, or, in this case, all.

The logical and allows us to create complex queries and such:

This will apply the enclosed CSS to screen viewports where the width is at least 600px and no wider than 1200px;  The logical and is used to add constraints to a query; you can combine as many as you like.

Finally, the expression is the media features we’re testing against. Again, most often you’ll use a few of these.

A little known fact is that CSS3 media queries also allow a logical OR. A comma can be used for this purpose:

This says, “apply the CSS on screen if either the pixel density is at least 300dpi OR if there are two device pizels for every CSS pixel.” For the record, this is not a real world example as of yet; these features are not yet well supported.

Media queries can be used within CSS files:

They can also be applied via the media attribute of the link element:

Lastly, they can be imported with @import: