- Common Uses for Media Queries
- Media Query Syntax Basics
- Initial Walkthrough
- Making Layout Changes
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Initial Walkthrough
In this section, I'll take you through some media queries in action. As a starting point, I'm going to use some examples I wrote for the book InterACT with Web Standards: A Holistic Approach to Web Design. Download the examples if you want to follow along, and use the code as you like in your own projects.
Follow these steps:
- Download the code exercises from the book. The exercises are in a file called code-exercises.zip; unzip this file on your system.
- Go to the directory named 21 - positioning, where you'll find an example called fixed_positioning1.html.
- Open fixed_positioning1.html in a desktop browser. You'll see something like Figure 1.
- Now try reducing the width of the browser window. At a certain point, the menu will change position, from being a vertical list of links on the side to being a horizontal list of links across the top, as shown in Figure 2.
)
Figure 1 Media query example in expanded state.
)
Figure 2 Media query example in narrow state.
Let's dive into the code to see how this trick works. The navigation menu list is wrapped in a division with the ID navigation_menu. Nothing is remarkable here except for the fact that some of the list items have a class of shifted so that they can be offset from each other. The relevant CSS (see fixed_positioning1.css) is as follows:
#navigation_menu {
position: fixed;
top: 5.5em;
left: 36.5em;
}
.shifted {
position: relative;
right: 10px;
}
#navigation_menu li a {
color: gray;
}
#navigation_menu li {
list-style-type: none;
}
Going quickly through this code, the first rule uses fixed positioning to move the entire menu over to the right side of the page. The second rule offsets the shifted list items. The third and fourth rules provide some color and get rid of the bullets from the list items.
Below this block in the CSS, we have a media query block:
@media all and (max-width: 760px) {
#navigation_menu {
top: 2.6em;
left: 0em;
z-index: 4;
min-width: 600px;
}
#header {
min-width: 600px;
}
#navigation_menu li {
display: inline;
}
.shifted {
right: 0px;
}
}
The @media rule at the start is saying, "Apply this CSS for all media types, but only if the width of the browser is 760 pixels or less." If this test comes back true, the CSS rules inside the media query work as follows:
- The first rule overrides the position of the navigation menu, repositioning it at the left side of the screen and a little higher. It also stops the width of the menu from going below 600 pixels, and gives it a higher z-index than anything else on the page, to make sure that it appears in front of the header division.
- The second rule stops the header division from going below 600 pixels in width.
- The third rule makes the list items behave like inline elements (the default is block, for li), so that they'll appear in a row rather than on top of one another.
- The fourth rule overrides the relative positioning of the shifted list items, so that they'll all appear an equal distance from each other.
These rules work together to give you the effect seen when you resize your browser window to a width narrower than 760 pixels. It's nice to be able to achieve effects like this without any scripting!
You could easily go further. One simple little use of media queries is to hide certain parts of the screen when printing, without needing to use a separate stylesheet. To hide the navigation menu altogether when printing, add this block to the stylesheet:
@media print {
#navigation_menu {
display: none;
}
}