Working out media queries

Now that we've worked out how much space we have to work with, we can now work out what happens to elements when we hit the limits of our available space. This is particularly relevant if we want to display hi-res images for example. After all, we don't want to show a high quality image if it chokes the available bandwidth of our device!

Let's take a look at how we can use media queries to switch between lo-res and hi-res versions of a single image:

1. We will start with setting up the markup we need for our demo. From the code bundle for this book, extract a copy of min-resolution.html and save it to the root of the project folder.
2. In a new file, add these style rules and save it as min-resolution.css in the css subfolder of our project folder. This is where the magic happens, that is, switching from the lo-res to hi-res versions of our image:

   #orchid { background-image: url('../img/mothorchid.png'); height: 24.31rem; width: 36.5rem; } 
   
   @media (min-resolution: 120dpi) { 
     #orchid { background-image: url('../img/[e-mail]'); 
       height: 24.31rem; width: 36.5rem; } 
   }

3. From the code download that accompanies this book, extract and save copies of mothorchid.png and [e-mail] into the img subfolder of our project folder.
4. If we preview the results of our work, we will first see the standard resolution image mothorchid.png.
   
5. However, if we resize the image by zooming in to at least 133 percent, we will see it switch to its hi-res equivalent.
   
6. Click on the – button to reset back to 100 percent and we will see the image revert back to the standard resolution version.

Tip

Using Google Chrome?

We can achieve the same effect using Chrome's Developer Toolbar. Press Ctrl + Shift + I to display it and then click on the drawer icon. Now, switch to the Screen tab and change the Device pixel ratio setting from 1 to 2 to show the hi-res image. For more details, please visit https://developer.chrome.com/devtools/docs/device-mode.

At this point, we can use this trick to display any hi-res image we need; the key is to ensure we have two images, one of a standard resolution, while the other is of a higher quality. A small word of note though—if you spend any time researching different types of media queries, then you may come across something akin to these lines of code:

@media (-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */
}

While still perfectly usable, the initial –webkit-min-device-pixel-ratio setting has been deprecated in favor of min-resolution; there is no need to use it unless you have to cater to really old browsers!

Now, we could easily use CSS queries in all of our projects, but there may still be occasions where standard queries might not work. A good example is for a navigation that behaves differently at different sizes. Fortunately, there is a solution for this—we can achieve a similar effect using the breakpoints.js library. Let's delve in now and take a look.