9 min read

(For more resources related to this topic, see here.)

Media queries

Media queries are an important part of responsive layouts. They are part of CSS to make it possible to add styles specific to a certain media. Media queries can target the output type, screen size, as well as the device orientation, and even the density of the display.

But let’s have a look at a simple example before we get lost in theory:

#header {
background-repeat: no-repeat;
background-image: url(logo.png);
}
@media print {
#header {
display: none;
}
}

The highlighted line in the preceding code snippet makes sure that all the nested styles are only used if the CSS file is used on a printer. To be a bit more precise, it will hide the element with the ID header once you print the document. The same could be achieved by creating two different files and including them with a code as follows:

<link rel="stylesheet" media="all" href="normal.css" />
<link rel="stylesheet" media="print" href="print.css" />

It’s not always clear whether you want to create a separate CSS file or not. Using too many CSS files might slow down the loading process a bit, but having one big file might make it a bit messier to handle it. Having a separate print CSS is something you’ll see rather often while screen resolution dependent queries are usually in the main CSS file.

Here’s another example where we use the screen width to break a two columns layout into a single column layout if the screen gets smaller. The following screenshot shows you the layout on an average desktop computer as well as on a tablet:

The HTML code we need for our example looks as follows:

<div class="box">1</div>
<div class="box">2</div>

The CSS including the media queries could be as follows:

.box {
width: 46%;
padding: 2%;
float: left;
}
@media all and (max-width: 1023px) {
.box {
width: 96%;
float: none;
}
}

By default, each box has a width of 46 percent and a padding of 2 percent on each side, adding up to a total width of 50 percent. If you look at the highlighted line, you can see a media query relevant to all media types but with a restriction to a maximum width of 1023 pixels. This means that if you view the page on a device with a screen width less than 1023 pixels, the nested CSS styles will be used. In the preceding example, we’re overriding the default width of 46 percent with 96 percent. In combination with the 2 percent padding that is still there, we’re going to stretch the box to the width of the screen.

Checking the maximum width can achieve a lot already, but there are different queries as well. Here are a few queries that could be useful:

  • The following query matches the iPad but only if the orientation is landscape. You could also check the portrait mode by using orientation: portrait.

    @media screen and (device-width: 768px) and (device-height:
1024px) and (orientation: landscape)

  • If you want to display content specific for a high-resolution screen such as a retina display, use this:

    @media all and (-webkit-min-device-pixel-ratio: 2)

  • Instead of checking the maximum width, you can also do it the other way round and check the minimum width. The following query could be used to use styles only used in a normal-sized screen:

    @media screen and (min-width: 1224px)

There are a lot more variables you can check in a media query. You can find a nicely arranged list of queries including a testing application on the following site:

http://cssmediaqueries.com/

Try to get an overview of what’s possible; but don’t worry, you’ll hardly ever need more than four media queries.

How to scale pictures

We’ve seen how you can check the device type in a few different ways, and also used this to change a two-column layout into a single-column layout. This allows you to rearrange the layout elements; but what happens to pictures if the container, in which the picture is located, changes size?

If you look at the following screen, you can see a mock-up where the picture has to change its width from 1000 pixels to 700 pixels:

Look at the code that follows:

<div id="container">
<img src = "picture.jpg" 
width="1000" height="400">
</div>

Assuming the HTML code looks like this, if we would add a responsive media query that resizes the container to match the width of the screen, we’ve to cut off a part of the picture. What we want to do is to scale the picture within the container to have the same or a smaller size than the container.

The following CSS snippet can be added to any CSS file to make your pictures scale nicely in a responsive layout:

img {
max-width: 100%;
height: auto;
}

Once you’ve added this little snippet, your picture will never get bigger than its parent container. The property max-width is pretty obvious; it restricts the maximum size. But why is height: auto necessary? If you look at the preceding HTML code, you can see that our picture has a fixed width and height. If we’d only specify max-width and look at the picture on a screen with a width of 500 pixels, we’d get a picture with the dimensions 500 x 400 pixels. The picture would be distorted. To avoid this, we specify height: auto; to make sure the height stays in relation to the width of the picture.

Pictures on high-density screens

If you printed some of your graphic ideas on a paper and not just displayed them on a computer screen, you’ll probably have heard of pixels per inch (ppi) and dots per inch (dpi) before. It’s a measure you can use to determine the number of pixels per inch. You’ll get a higher density and more details if you have more pixels or dots per inch.

You might have read about retina screens; those displays have a density of around 300 dpi, about twice as much as an average computer monitor. You don’t have to, but it’s nice if you also make sure that you give owners of such a device the chance to look at high-quality pictures.

What’s necessary to deliver a high-quality picture to a retina screen? Some of you might think that you have to save an image with more ppi; but that’s not what you should do when creating a retina-ready site. Devices with a retina display simply ignore the pixels per inch information stored in an image. However, the dimension of your images matters.

A picture saved for a retina display should have exactly twice the size of the original image. You could use an SVG picture instead but you still have to use a fallback picture because SVG isn’t supported as well as image formats like PNG. In theory, SVG would be even better because it is vector-based and scales perfectly in any resolution.

Enough theory, let’s look at an example that uses CSS to display a different image for a retina display:

#logo {
background-image: url(logo.png);
background-size: 400px 150px;
width: 400px;
height: 150px;
}
@media all screen and (-webkit-min-device-pixel-ratio: 2) {
#logo {
background-image: url([email protected]);
}
}

We’ve got an HTML element <div id=”logo”></div> where we display a background picture to show our logo. If you look at the media query, you can see that we’re checking a variable called –webkit-min-device-pixel-ratio to detect a high-resolution display. In case the display has a pixel ratio of 2 or higher, we’re using an alternative picture that is twice the size. But note the width and height of the container stays the same.

What alternatives are there? As we quickly mentioned, a vector-based format such as SVG would have some benefits but isn’t supported on IE7 and IE8. However, you can still use SVG. But you have to make sure that there’s a fallback image for those two browsers. Have a look at the following code:

<!--[if lte IE 8]>
<img src = "logo.png" width="200" height="50" />
<![endif]-->
<!--[if gt IE 8]>
<img src = "logo.svg" width="200" height="50" />
<![endif]-->
<!--[if !IE]>-->
<img src = "logo.svg" width="200" height="50" />
<!--<![endif]-->

In the preceding code, we’re using conditional tags to make sure that the old versions of Internet Explorer use the logo saved as PNG, but switch to SVG for modern browsers. It takes a bit more effort because you have to work with vectors and still have to save it as a PNG file, but if you want to make sure your logo or illustrations are nicely displayed when zoomed, use this trick.

Working with SVG is an option, but there’s another vector-based solution that you might want to use in some situations. A simple text is always rendered using vectors. No matter what font size you’re using, it will always have sharp edges. Most people probably think about letters, numbers, and punctuation marks when they think about fonts, but there are icon fonts as well. Also keep in mind that you can create your own icon web font too. Check this site:http://fontello.com/ , which is a nice tool that allows you to select the icons you need and use it as a web font. You can also create your very own icon web font from scratch; check out the following link for a detailed tutorial:

http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-iconwebfont/

One last word before we continue; Retina screens are relatively new. It’s therefore no surprise that some of the specifications to create a perfect retina layout are still drafts. The Web is a fast moving place; expect some changes and new features to insert an image with multiple sources and more vector features.

Summary

In this article, we learned about responsive themes that can be added to our themes and how media queries are an important part of responsive layouts. This article also helped you on how to scale pictures on different types of devices. It also helped you understand areas regarding what it takes to display websites for retina screens.

Resources for Article :

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here