Stunning CSS3: Different Screen Size, Different Design
This chapter is from the book
This chapter is from the book
This chapter is from the book
- It's no secret or surprise that the variety of ways people browse the web is increasing. People may view your web pages on widescreen TVs, desktop computers, netbooks, mobile phones—even a refrigerator. While you can't make a site that looks identical on every single device at every screen size and text size, you can make a site that adapts to the users' settings so that it looks good and works well in the screen space available. In this chapter, you'll learn how to use CSS3 media queries to tailor a web page's design to various screen sizes on the fly, making your web pages more dynamic, responsive, and usable.
The Base Page
Figure 6.1 shows a layout for a fictional bakery. The layout is liquid (also known as fluid) so that it adjusts to the width of the browser window, making it work at a variety of screen sizes without generating horizontal scrollbars or causing elements to overlap. But it certainly looks better at some screen sizes than at others. On very wide or very narrow windows, the design is still usable and looks OK, but it's not as attractive as it is within the 800- to 1200-pixel range (Figure 6.2).
)
Figure 6.1 The fictional Little Pea Bakery home page, as seen in a browser window that's 1024 pixels wide.
)
Figure 6.2 The design looks OK, but not great, in very narrow and very wide windows.
In Chapter 2 of my book Flexible Web Design: Creating Liquid and Elastic Layouts with CSS, I show that flexible layouts don't have to be plain or ugly to work at a variety of screen sizes. You can build pages with flexible images, reasonable text-line lengths, and creative use of space to make sure the design works well at a large range of widths. But I don't deny that it's impossible to create a design that looks every bit as good condensed into 300 pixels as it does stretched out to 2000 pixels. I've always advocated using min-width and max-width, as well as separate styles for mobile devices, in order to get around this problem.
Since the writing of Flexible Web Design in 2008, however, a new tool for creating layouts that work at any ridiculously large range of sizes you want has gained good browser support: media queries.