A Smarter Way To Learn HTML & CSS(2015)

86
Media queries

These days, you almost have to make your site responsive. That means creating custom styling for screens of different sizes, from the smallest phone to the largest desktop.

For example, five medium-size images arrayed across the screen are fine if the screen is 1280 pixels wide. But not if it’s a 480-pixel iPhone screen. On a phone, you’ll want to force them to stack vertically.

To create different style rules for different screens, you write media queries. For example, a media query asks, “Is the screen no wider than x pixels and no narrower than y pixels? If so, follow these style rules.”

Responsive design can be a maddeningly complicated business and deserves a book of its own, but I want to give you a sense of how it works, so I’ll show you one example.

There are various ways to incorporate media queries in your code. I’ll show you how to add them to a stylesheet.

There are thirteen different media characteristics you can test for in a media query, including color and whether the user is looking at a mobile device in portrait or landscape orientation. I’ll focus on the most common tests, for a screen of any kind (that is, not a printer) and for minimum device width and maximum device width.

Here’s some code.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
img.gallery {
display: block;
}
}

The code above specifies block—that is, one on each line—for the “gallery” class of images when displayed on a phone, a device we define as having a minimum width of 320 pixels and a maximum width of 480 pixels.

Let’s look at each piece of the code.

@media is how all media queries begin.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
img.gallery {
display: block;
}
}

only screen means the style rule applies only to devices with screens. This means it doesn’t apply to printers.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
img.gallery {
display: block;
}
}

When you write and in a media query, you’re saying, “The following must also be true in order for the style rule to apply.” So it’s not enough for the device to be a screen. It must be a screen and the minimum device width must be 320 pixels (portrait mode) and the maximum device width must be 480 pixels (landscape mode).

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
img.gallery {
display: block;
}
}

The device-width specifications must be enclosed in parentheses.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
img.gallery {
display: block;
}
}

By writing display: block, you tell the browser not to float the images.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
img.gallery {
display: block;
}
}

The following media query tells the browser to float the images when they’re displayed on a desktop or laptop, defined as having a minimum width of 1224 pixels. Note that there’s no maximum width, since we’re testing for just one orientation.

@media only screen and (min-device-width: 1224px) {
img.gallery {
float: left;
}
}

1. In your CSS file, code a media query that styles a class of paragraph in the font-family “Comic Sans MS”, cursive, sans-serif—if the screen is at:
least 800 pixels wide.

2. In your HTML file, code a paragraph of that class.

3. Save the files. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-86-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-86-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/86.html