Media Queries

Quick Summary

A media query is essentially a conditional statement allowing specific CSS styles to be applied under given circumstances. For example, a media query can be used to change the font size of a web page when viewed on various devices.

Location and Syntax

Media queries can exist in multiple locations, often depending upon purpose.

Within a link statement in the HTML file

This allows us to connect multiple CSS files to the HTML file. This approach is commonly used to format a document to print. The same approach can be used under other circumstances; however, remember that extra http requests slow down a web site. <link rel=”style sheet” type=”text/css” media=”screen and (min-width: 768px)” href=”style.css”

Embedded within an existing CSS file

Multiple media queries can be included within a single CSS file. This allows for better organization and avoids the extra http calls. Note that combining all CSS statements within a single file does force the browser to download all statements. This may (or may not) be faster than the extra http requests.

@media screen and (min-width: 768px) {
CSS formatting here
}

With import

Avoid import. It adds an extra http request for no real reason.

Shorthand Syntax

The words “screen and” can safely be omitted. Browsers will default to all media types.

Test Criteria

Media queries can test for a wide variety of criteria, including the following:

*These may be depreciated in the near future. Avoid when possible.

Organization

Many web sites have multiple CSS files and media queries. There is really no “best” organizational scheme.

Create a separate CSS file for each possible layout.

Using this approach, media queries must be placed within the link statements to select the appropriate file. As mentioned earlier this may slow the web page down. In addition, this approach requires the developer to create and maintain multiple CSS files.

Create a single CSS file and group formatting by layout.

This approach minimizes the number of media queries required; however, the CSS statements pertaining to a specific element (such as nav) will be dispersed across the CSS document. In other words, the CSS statements for nav would appear in the first part of the CSS file, then would appear again following each media query. This can become confusing.

Create a single CSS file and group formatting by element.

This approach groups all CSS statements impacting a given element together; however, extra media queries may be required. Our textbook author prefers this approach. Personally I also prefer this approach, with one exception. If I develop a CSS file for printing, I keep that completely separate and use a second link statement. I find it simpler.

Example

The following example uses a media query to change background colors based on viewport size and orientation. The first media query (min-width: 800px) will change the background-color to silver IF the viewport width exceeds 800px. The second media query min-width: 1200px) will change the background color to black if the width exceeds 1200px. The third media query (orientation: portrait) will change the background color to red when the viewport is in portrait orientation. Notice the default background color of white: this will apply only in landscape orientation and when the viewport width is less than 800px.

Restate this:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Ch 3 Media Query Demo</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="initial-scale=1.0 width=device-width">

</head>

<body>

    <h1>Media Query Demo</h1>
    <p>Chapter Three</p>
    <h2>Mobile-First Design</h2>
    <p>On a small screen, the background will be white.</p>
    <p>At 800 pixels in width, the background will become silver, and at 1200 the background will become black.</p>
    <p>Try changing your viewport so that it's portrait!</p>

</body>

</html>

CSS

body {
    background-color: white;
    font-size: 2em;
}

@media (min-width: 800px) {
    body {
        background-color: silver;
        font-size: 1em;
    }
}


@media (min-width: 1200px) {
    body {
        background-color: black;
        color: white;
        font-size: 1em;
    }
}


@media (orientation: portrait) {
    body {
        background-color: red;
        color: black;
        font-size: 1.5em;
    }
}

Usage

Media queries are an essential part of responsive design. Although some techniques create responsive elements, media queries allow the designer to alter the CSS associated with any element based on the conditions listed above.

Mobile-First Design and Media Queries

Mobile-first design suggests beginning with the layout for the mobile device. Typically this is the least capable device; therefore, the designer can progressively enhance the layout for larger screens.

This suggests that the first CSS statements should set up the mobile appearance, while later CSS statements contained within media queries would alter the appearance for larger viewports.