Flix: Media Queries for Retina/HiDPI Graphics

Topics covered in this Mobile & Responsive Web Design tutorial:

Using media queries to load hi-res images for Retina/HiDPI displays

Exercise Preview

Photos courtesy of istockphoto, unizyne, Image #19302441.

Exercise Overview

CSS media queries let us add CSS that will only be applied when specific criteria are met, such as screen resolution. In this exercise you’ll learn how to use a media query to load a high-resolution background image for hi-res devices (which Apple calls Retina displays). Rather than sending hi-res images to all devices, we can specify that only hi-res devices get them. This ensures low-res devices don’t have to download larger graphics that won’t benefit them.

NOTE: As all screens changed from black and white to color, all screens will eventually change to hi-res. While serving low and hi-res graphics is the most optimal solution, more sites are starting to use only hi-res graphics (with proper optimization the hi-res graphics aren’t that much larger).

Previewing

1. We’ll be using a new folder of provided files for this exercise. Close any files you may have open in your code editor to avoid confusion.
2. On your Desktop, navigate into Class Files > yourname-Mobile and Responsive Class > Flix Media Queries for Retina Graphics.
3. Preview index.html in iOS Simulator or Google Chrome (either works, or do both!).

4. If you previewed in Chrome:

   • Ctrl–click (Mac) or Right–click (Windows) anywhere on the page and select Inspect to open Chrome’s DevTools.

   • If you’re not already in device mode, click the Toggle device toolbar button on the upper left of the DevTools panel.

   • From the device menu above the webpage, select a device such as the iPhone 5.

   • Click the Reload button, or hit Cmd–R (Mac) or Ctrl–R (Windows).

5. If you previewed in iOS Simulator, go to Window > Scale > 100% (or hit Cmd–1).

6. Take a look at the header’s background graphic (the blue rays). Currently this is the low-res (1x) background image, which looks good, except on hi-res displays it could be sharper.

   NOTE: If you previewed in the iOS Simulator, you’ll be able to see that it’s blurry even if you’re on a low-res Mac display, but the simulator window will be large on your screen.

7. Leave the page open in Chrome or iOS Simulator so we can reload it later to see the change.

Editing the CSS

1. Open the Flix Media Queries for Retina Graphics folder in your code editor if it allows you to (like Sublime Text does).
2. Open main.css from the css folder.

3. We created this site/page using some elements from the HTML5 Boilerplate, which we mentioned in previous exercises. They provide a smart media query that targets hi-res devices. Starting on line 149 find the following code:

   @media print, (-webkit-min-device-pixel-ratio: 1.25),
                 (min-resolution: 1.25dppx),
                 (min-resolution: 120dpi) {
      /* Styles for high resolution devices go here */
   
   }
   
   
   

   NOTE: This code targets high-resolution devices, whether that’s a print, or a hi-res screen. CSS rules we place inside this code will only apply to those devices.

4. While we could add our CSS inside the media query right here, our header rule is higher up in the code. If we keep the low-res header rule in one place, and the hi-res header rule down here, it might be easy to forget about this rule when doing later website updates. Let’s copy this media query so we can have it closer to our header rule higher in the code. Select and copy the media query:

   @media print, (-webkit-min-device-pixel-ratio: 1.25),
                 (min-resolution: 1.25dppx),
                 (min-resolution: 120dpi) {
      /* Styles for high resolution devices go here */
   
   }
   
   
   

5. Scroll up to the header rule on line 35.

6. Paste the code after the header rule:

      border-bottom: 1px solid rgba(255,255,255, .2);
      padding: 0 15px;
   }
   @media print, (-webkit-min-device-pixel-ratio: 1.25),
                 (min-resolution: 1.25dppx),
                 (min-resolution: 120dpi) {
      /* Styles for high resolution devices go here */
   
   }
   header h1 {
   

7. We need to add a rule for our high-resolution header image. Delete the Styles for high resolution devices comment line and in its place add the following bold code:

   @media print, (-webkit-min-device-pixel-ratio: 1.25),
                 (min-resolution: 1.25dppx),
                 (min-resolution: 120dpi) {
      header {
         background-image: url(../img/header-bg@2x.png);
      }
   }
   

   NOTE: We made two images, one with a normal filename, and another with @2x at the end of the filename. The 2x version is twice the pixel width/height of the 1x version, and therefore twice the resolution when viewed at the same physical size.

8. Save the file.
9. Return to index.html in Chrome or the iOS Simulator and notice how the header’s background currently looks.

10. Reload the page.

    Notice the header background gets larger, and cropped off. That’s because it’s twice as large, and we never told the background image to scale to fit this header. Let’s do that next.

Sizing the Background Image

1. Leave the page open in Chrome or iOS Simulator.
2. Switch back to main.css in your code editor.

3. Let’s make the header background scale to fit the header area, no matter whether it’s the low or hi-res version. On line 35, find the header rule and add the following bold code to give the background an auto width and 100% height:

   header {
      background-color: #0A1D32;
      background-image: url(../img/header-bg.png);
      background-repeat: no-repeat;
      background-position: center bottom;
      border-bottom: 1px solid rgba(255,255,255, .2);
      padding: 0 15px;
      background-size: auto 100%;
   }
   

4. Save the file.
5. Switch back to Chrome or the iOS Simulator and reload the page. The header background should once again be the correct size.

6. If you’re in iOS Simulator, the header background should now appear sharper than it was previously.

   • If you have a Retina display, the page will appear sharp and appropriately sized.
   • If you have a low-res display, the page will also appear sharp, but the entire layout appears twice as large as it should be (which is the only way Apple can show you more detail on your low-res display).

7. If you’re in Chrome, let’s use the device pixel ratio to see the change. This setting is not shown by default, so we’ll have to enable it. As shown below, click the 3 dotted button and choose Show device pixel ratio.

   

8. A new DPR: 2.0 option will appear to the right of the dimensions. It’s grayed out though. From the device menu (to the left of the dimensions) choose Responsive.

   NOTE: DPR stands for device pixel ratio.

9. The DPR menu will no longer be disabled. Before using it though, let’s make sure your preview is set to a mobile size. As shown below, hover over the gray bar under the dimensions. You should see Mobile S - 320px, so click once to switch to that size.

   

10. While watching the header background image, click on the DPR menu and choose 1. Notice the image changes.

    • If you have a low-res screen, you can’t see the difference in the details because of the limitations in your screen, but you should notice a slight shift due to minor differences between the graphics.
    • If you have a high-res screen, you can see the sharp background has now changed back to the original (blurrier) 1x.

11. Click on the DPR menu and choose Default: 2.0 to see the graphic switch back.

    • If you have a low-res screen, you’ll only see a minor shift, but it won’t look better on your limited screen.
    • If you have a hi-res screen, you’ll see the sharper image is back.