Servage Magazine

Because fluid layouts are fundamental to responsive design, I think it bears a quick recap. Fluid layouts are created using percentage width measurements so that elements resize proportionally to fill the available width of the screen or window.

It’s not feasible to create a design for all the possible device widths on which your page might be viewed. Web designers generally create two or three designs (sometimes a few more) targeted at major device classes, such as smartphones, tablets, and desktop browsers. They rely on fluid layouts to take care of all the possible sizes in between. Fluid layouts avoid awkward amounts of leftover space and prevent the right side of the page from getting cut off.

Because I’ve picked up the fluid layout styles from the previous exercises for this project, there is nothing we need to do to the Jenware styles. For your own projects, however, be sure to design flexibly. And speaking of flexible, let’s do something about that logo image!

Making images flexible

Every now and then a solution is simple. Take, for example, the style rule required to make images scale down to fit the size of their container:

img {
max-width: 100%;
}

That’s it! When the layout gets smaller, the images in it will scale down to fit the width of the container they are in. If the container is larger than the image—for example, in the tablet or desktop layouts—the image does not scale larger; it stops at 100% of its original size. When you apply the max-width property, be sure that there are no width and height attributes in the img elements in the HTML document, or the image won’t scale proportionally.

But wait, things are never that simple, right? I’m afraid that although the style rule is simple, the larger issue of images on the mobile display is more complicated. Even in our modest example, we are serving an image to the smartphone that is larger than it needs, which means unnecessary data is transferred. I should also note that you can scale down other embedded media, such as an object, embed, or video, using max-width as well.

Media query magic

Now we get to the real meat of responsive design: media queries. Media queries allow designers to deliver styles based on media type. The defined media types are print, screen, 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.

The complete list of device features you can detect with media queries appears in Table.

You can 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 */
}

Sources for Further Reading

• Shayhowe
• Teamtreehouse