• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 6. Different Screen Size, Different Design

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


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint