1. In the CSS file, add the image resizing style rule to the style sheet right after the body rule.

    img { max-width: 100%; }

Check your results with the Toolbar resizer. Also experiment with adjusting the window size.

• Media queries allow designers to deliver styles based on media type. The defined media types are print, speech, handheld, braille, projection, screen, tty, and tv. The keyword all indicates that the styles apply to all media types
• Media queries can also evaluate specific media features, such as the device-width, orientation, and resolution.
• Most properties can be tested for a minimum or maximum value using the min- and max- prefixes, respectively.
• For example, min-width: 480px tests whether the display is at least 480 pixels wide. 768-pixel-wide displays pass the test and get the styles; a 320-pixel display would not.
• There is a complete list of device features you can detect with media queries in table 18-1 in the textbook.
• You add media queries to a style sheet along with your other styles.
  • Here is an example of a style sheet media query that determines whether the media type is a screen and whether it is at least 480 pixels wide:

        @media screen and (min-width: 480px;) {
    
          /* put styles for devices & browsers that pass this test inside the curly braces */
    
        }

  • This next example that tests for whether the screen is under 700 pixels wide and is in landscape orientation. Notice that each feature and value pair is placed inside parentheses. The word "and" strings the various requirements together. The device must pass all of the requirements in order to deliver the enclosed styles.

    @media screen and (max-width: 700px;) and (orientation: landscape;) {
      /* put styles for devices & browsers that pass this test here */
    }

• The last example, the media query looks to see whether the device has a high-density display like the Retina iPhone, iPad, and newer MacBook Pro.

  @media screen and (-webkit-min-device-pixel-ratio: 2),
          screen and (-moz-min-device-pixel-ratio: 2),
          screen and (-o-min-device-pixel-ratio: 2),
          screen and (-ms-min-device-pixel-ratio: 2),
          screen and (min-device-pixel-ratio: 2) {
  
   /* styles referencing high-resolution images here */
  
  }

A best practice for responsive sites is to adopt a "mobile first" mentality. That means that you take care of the styles for the smallest, simplest devices first, and use media queries to bring in overriding styles that adapt the design as more display real estate and features become available.

Many designers try to take a "desktop first" a[[roach because they are redesigning an existing site, but mobile first is preferable. Especially since mobile browsers are now more common than desktop ones.

Mobile-first media queries tend to begin with the min- prefix, bringing in new styles when the width is at least the specified width or larger.

Remember that styles lower in a stack override the styles that precede them, whether it's rules in a single style sheet or a list of link elements.

Your baseline styles should come first, followed by the small device styles, followed by the enhanced styles for larger browsers.

1. Open jenware.css in a text editor. The current style sheet creates that edge-to-edge, one-column design that works great for narrow screens but looks miserable when it gets wide.
2. Start by adding styles for devices that are at least 481 pixels wide.
   • With a little extra space, you can float the product images to the left and clear the following "More about..." links, just as you did a few lessons ago. Don't forget to add the class="more" attributes.
   • The style also adds some margins and rounded corners.
   • Put the new rules at the end of the stylesheet.

         @media screen and (min-width: 481px) {
           #products img {
             float: left;
             margin: 0 6px 6px 0;
           }
           #products .more {
             clear: left;
           }
           #products {
             margin: 1em;
           }
           #testimonials {
             margin: 1em 5%;
             border-radius: 16px;
           }
         }
       

3. The next set of styles will kick in when the display area is at least 780 pixels wide.
   • The styles in this media query create a two-column layout by floating the #products div to the left and applying a wide left margin to the #testimonials box.
   • The copyright paragraph is cleared so it appears at the bottom of the page.
   • Finally, set a max-width on the #content div so the content will never appear wider than 1,024 pixels, even if the browser is expanded much wider
   • Put the new rules at the end of the stylesheet, after the previous set.

             @media screen and (min-width: 780px) {
                   #products {
                     float: left;
                     margin: 0 2% 1em;
                     clear: both;
                     width: 55%;
                     overflow: auto;
                   }
                   #testimonials {
                     margin: 1em 2% 1em 64%;
                   }
                   p#copyright {
                      clear: both;
                   }
                   #content {
                     max-width: 1024px;
                     margin: 0 auto;
                   }
                 }

4. Check your site in the browser. Experiment to see how it responds to different widths.

Getting responsive right takes a lot of planning and work. Because the mobile Web is relatively new, the development community is still encountering and working through the challenges of mobile design.

Choosing breakpoints

The point at which the media query delivers a new set of styles is called a breakpoint. One of the primary design decisions in creating a responsive design is deciding at which widths to introduce a significant design change.

Some sites have just two layouts triggered at a single breakpoint. More commonly, responsive sites use three designs targeted at typical phone, tablet, and desktop widths, and but some sites use as many as five. How many you choose depends on the nature of your site's design.

Responsive Images

One of the most difficult problems facing mobile web developers is how to get images right.

Ideally, a device will download only the image size that is best for its dimensions and network speed. The goal is to avoid downloading unnecessary data, whether that comes in the form of an image that is larger than it needs to be for a small screen or downloading two versions of an image (low-res and high-res) when only one is needed.

One content doesn't fit all

CSS works fine for swapping out styles and moving elements around on the screen (or even hiding them).

But in many cases, smaller devices are better served with different content or the same content in a different order. JavaScript can handle a certain amount of rearranging and offers a way to conditionally load content.

Responsive limitations

For some websites, particularly text-heavy sites like blogs, a responsive redesign is all that is needed to make them pleasant to use on small screens.

For other sites, however, simply adjusting the styles is not enough. When the mobile use case for a site or service is significantly different from desktop use (based on user testing, of course), then it may be necessary to build a separate mobile site.