6. Different Screen Size, Different Design

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.

What You’ll Learn

We’ll be restyling an entire page layout to work with different screen sizes and devices using these pieces of CSS3: Media queries to apply styles selectively based on the visitor’s device properties Multi-columns to flow text into side-by-side columns