Welcome to my portfolio. I'm Matt Woods and I have a passion for building and designing great looking websites. Start A Project Today!
Latest Blog Entries:

Media Queries Helping Us Web Developers Keep Sane

Published: Tuesday, June 4th, 2013 at 12:02 pm

With worldwide devices (PCs, Tablets and Phones) on pace to ship a total of 2.4 billion units in 2013, a 9 percent increase from 2012, and 8.18% of those being tablets and 77.77% being mobile according to Gartner, Inc [1], it’s more important than ever to make your website’s optimised for mobile device as well as desktops.

Media Queries are a CSS3 module that allows us to render content to adapt it to conditions such as screen resolution (e.g. large screens, small screens, smart phones, tablets, high definition screen). Used with a media type, a media query is a logical expression that evaluates one or more features of an output device using Boolean theory (true/false). It finally became a W3C standard in June 2012[2] and it’s the cornerstone of Responsive Web Design.

Media Query Features

The following table contains the media features listed in the W3C recommendation for media queries[3]

Feature Value Min/Max Description
color integer yes number of bits per color component
color-index integer yes number of entries in the color lookup table
device-aspect-ratio integer/integer yes aspect ratio
device-height length yes height of the output device
device-width length yes width of the output device
grid integer no true for a grid-based device
height length yes height of the rendering surface
monochrome integer yes number of bits per pixel in a monochrome frame buffer
resolution resolution (“dpi” or “dpcm”) yes resolution
scan “progressive” or “interlaced” no scanning process of “tv” media types
width length yes width of the rendering surface

The device-width and device-height refers to the dimensions of the output device screen.

The width and height on the other hand refers to the dimensions of the screen resolution

Resolutions are specified using a number immediately followed by one of the unit’s dpi (dots per inch) or dpcm (dots per centimeter).

While the Aspect ratios are specified as the quotient of two numbers representing width/height such as: 16/9 or 1280/1024.

Examples

The CSS Tricks article: Media Queries for Standard Devices by Chris Coyier [4] gives us a great example to start from:

First you need to disable mobile browser scaling by adding the code below within the tags

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Then you create a CSS files and place the styles within the media query code.

Stylesheet.css

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    /* Styles */

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {

    /* Styles */

}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

    /* Styles */

}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

    /* Styles */

}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

    /* Styles */

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

    /* Styles */

}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {

    /* Styles */

}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {

    /* Styles */

}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

    /* Styles */

}

You can also use alternate stylesheets as well for different media devices. First you need to add the code below within the tags:

<link href="normal.css" rel="stylesheet" media="only screen and (min-width : 1824px)" type="text/css" />
<link href="narrow.css" rel="stylesheet" media="only screen and (min-width : 1224px)" type="text/css" />

Then you create the two CSS files called above and place the styles within the media query codes.

normal.css

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {

    /* Styles */

}

narrow.css

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {

    /* Styles */

}

I hope this helps you on your way to using media queries and responsive design.

Comments

No comments yet

  • You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back To Top