- The Base Page
- What are Media Queries?
- Changing the Layout for Large Screens
This chapter is from the book
This chapter is from the book
This chapter is from the book
What are Media Queries?
Media queries let you customize styles based on the characteristics of the user's device or display, such as the viewport width, whether it's in portrait or landscape mode, or whether it shows color. This is different from the media types, such as screen and print, that you can specify for your style sheets in CSS 2.1. With media queries, you specify not only the media type to which you want to apply a set of styles, but also one or more characteristics of the user's display. Here's an example:
@media screen and (max-width: 600px) {
body {
font-size: 88%;
}
#content-main {
float: none;
width: 100%;
}
}
The above media query starts with the @media rule, and then specifies a media type (in this case, screen). Next there's the word and, followed by the characteristic we want to match against, called the media feature. This particular media feature, max-width: 600px, tells the browser that the styles for this media query, which are contained within a set of curly brackets for the media query as a whole, should apply only up to a maximum width of 600 pixels. If the viewport width exceeds 600 pixels, the browser will ignore the styles inside the media query.
This media query can be dropped right into your main style sheet, keeping all your styles in one place for easy debugging and maintenance, as well as saving an HTTP request. If you want, however, you can apply media queries to separate style sheets on the link element or @import rule:
@import url(narrow.css) only screen and (max-width:600px); <link rel="stylesheet" media="only screen and (max-width:600px)" href="narrow.css">
Here, I've added the keyword only in front of the media type screen to keep some older browsers that don't understand media queries from downloading and applying the style sheets universally. Most non-supporting browsers will not use the sheet anyway, but this is extra insurance. The only keyword isn't needed when you place the @media rule directly in your main style sheet.
Whether embedded with other CSS or in separate sheets, media queries are a powerful new tool in web design. We can use them to customize and fine-tune our styles to each user's device and settings with more precision than we've ever been able to before. This can improve not only the attractiveness of our web pages, but also their usability. We can change text line lengths, leading, and font sizes to make sure the text remains readable at different widths. We can rearrange columns and resize or remove images on small screens to make better use of the space and let users get right to the content they want. We can make links larger on touch-screen mobile devices to make them easier for people to activate with their fingers. And we can do all this without having to involve complicated scripting for browser sniffing, feature detection, or style-sheet switching. You just continue to use the CSS that you already know to write different styles for different scenarios.
Let's use media queries now on our example page to customize the design to large screens, small screens, and mobile devices.