Responsive Web Design - media quries

Media Queries

Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example. Being able to apply uniquely targeted styles opens up a world of opportunity and leverage to responsive web design.

Initializing Media Queries

There are a couple different ways to use media queries, using the @media rule inside of an existing style sheet, importing a new style sheet using the @import rule, or by linking to a separate style sheet from within the HTML document. Generally speaking it is recommend to use the @media rule inside of an existing style sheet to avoid any additional HTTP requests.

HTML

<!-- Separate CSS File -->
<link href="styles.css" rel="stylesheet" 
media="all and (max-width: 1024px)">

CSS

/* @media Rule */
@media all and (max-width: 1024px) {...}

/* @import Rule */
@import url(styles.css) all and (max-width: 1024px) {...}

Each media query may include a media type followed by one or more expressions. Common media types include all,screen, print, tv, and braille. The HTML5 specification includes new media types, even including 3d-glasses. Should a media type not be specified the media query will default the media type to screen.

The media query expression that follows the media type may include different media features and values, which then allocate to be true or false. When a media feature and value allocate to true, the styles are applied. If the media feature and value allocate to false the styles are ignored.

Logical Operators in Media Queries

Logical operators in media queries help build powerful expressions. There are three different logical operators available for use within media queries, including and, not, and only.

Using the and logical operator within a media query allows an extra condition to be added, making sure that a browser or devices does both a, b, c, and so forth. Multiple individual media queries can be comma separated, acting as an unspoken or operator. The example below selects all media types between 800 and 1024 pixels wide.

@media all and (min-width: 800px) and (max-width: 1024px) {...}

The not logical operator negates the query, specifying any query but the one identified. In the example below the expression applies to any device that does not have a color screen. Black and white or monochrome screens would apply here for example.

@media not screen and (color) {...}

The only logical operator is a new operator and is not recognized by user agents using the HTML4 algorithm, thus hiding the styles from devices or browsers that don’t support media queries. Below, the expression selects only screens in a portrait orientation that have a user agent capable of rending media queries.

@media only screen and (orientation: portrait) {...}

Omitting a Media Type

When using the not and only logical operators the media type may be left off. In this case the media type is defaulted to all.

Media Features in Media Queries

Knowing the media query syntax and how logical operators work is a great introduction to media queries but the true work comes with media features. Media features identify what attributes or properties will be targeted within the media query expression.

Height & Width Media Features

One of the most common media features revolves around determining a height or width for a device or browser viewport. The height and width may be found by using the height, width, device-height, and device-widthmedia features. Each of these media features may then also be prefixed with the min or max qualifiers, building a feature such as min-width or max-device-width.

The height and width features are based off the height and width of the viewport rendering area, the browser window for example. The device-height and device-width features, on the other hand, are based off the height and width of the output device, which may be larger than the actual rendering area. Values for these height and width media features may be any length unit, relative or absolute.

HEIGHT & WIDTH@media all and (min-width: 320px) and (max-width: 780px) {...}

Within responsive design the most commonly used features include min-width and max-width. These help build responsive websites on desktops and mobile devices equally, avoiding any confusion with device features.

Using Minimum & Maximum Prefixes

The min and max prefixes can be used on quite a few media features. The min prefix indicates a values of greater than or equal to while the max prefix indicates a value of less than or equal to. Using min and max prefixes avoid any conflict with the general HTML syntax, specifically not using the < and > symbols.

Orientation Media Feature

The orientation media feature determines if a device is in the landscape or portrait orientation. Thelandscape mode is triggered when the display is wider than taller and the portrait mode is triggered when the display is taller than wider. This media feature plays a part largely with mobile devices.

@media all and (orientation: landscape) {...}

Aspect Ratio Media Features

The aspect-ratio and device-aspect-ratio features specifies the width/height pixel ratio of the targeted rendering area or output device. The min and max prefixes are available to use with the different aspect ratio features, identifying a ratio above or below that of which is stated.

The value for the aspect ratio feature consist of two positive integers separated by a forward slash. The first integer identifies the width in pixels while the second integer identifies the height in pixels.

@media all and (min-device-aspect-ratio: 16/9) {...}

Pixel Ratio Media Features

In addition to the aspect ratio media features there are also pixel-ratio media features. These features do include the device-pixel-ratio feature as well as min and max prefixes. Specifically, the pixel ratio feature is great for identifying high definition devices, including retina displays. Media queries for doing so look like the following.

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), 
  only screen and (min-device-pixel-ratio: 1.3) {...}

Resolution Media Feature

The resolution media feature specifies the resolution of the output device in pixel density, also known as dots per inch or DPI. The resolution media feature does accept the min and max prefixes. Additionally, the resolutionmedia feature will accept dots per pixel (1.3dppx), dots per centimeter (118dpcm), and other length based resolution values.

@media print and (min-resolution: 300dpi) {...}

Other Media Features

Other media features include identifying available output colors with use of the color, color-index, andmonochrome features, identifying bitmap devices with the grid feature, and identifying the scanning process of a television with the scan feature. These features are less common but equally as helpful when needed.

Media Query Browser Support

Unfortunately media queries do not work within Internet Explorer 8 and below, as well as other legacy browsers. There are, however, a couple suitable polyfills written in Javascript.

Respond.js is a lightweight polyfill that only looks for min/max-width media types, which is perfect should those be the only media query types used. CSS3-MediaQueries.js is a more developed, and heavier, polyfill offering support for a larger array of more complex media queries. Additionally, keep in mind any polyfill can have performance concerns, and potentially slow down websites. Make sure that any given polyfill is worth the performance trade off.