Chapter 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 ...

Get Stunning CSS3: A Project-Based Guide to the Latest in CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.