Information Technology Reference
In-Depth Information
5
Chapter
Handling Multiple Screen
Resolutions with CSS 3
One of the hardest things to deal with when designing websites is the myriad of different
user configurations you might encounter. Modern web browsers and operating systems
are highly configurable, and different options can affect how your web application is
viewed. In this chapter, we'll talk specifically about screen resolution—or the number of
pixels on the screen—and how one can accommodate varying resolution settings using
CSS 3.
A History of Tired Eyes and Resolution Evolution
If you've ever used a computer late into the night, perhaps after a long day of work, you
might have discovered a helpful trick: You can change the size of the objects on the
screen to make reading them easier on your eyes. This generally involves changing your
computer's display resolution. The resolution is simply the number of pixels that are
displayed by your screen and is given in two numbers—the first for the number of pixels
wide, the second for the number of pixels tall (i.e., height). By changing resolution, most
often by scaling it down from something high, such as 2560 x 1600 (incidentally, what
I'm using as I type this page at 7 PM at night), to something lower (perhaps 1600 x
1200—a good 11 PM resolution) you're taking away individual pixels, which means that
items on your screen will appear larger.
In the late 1990s, as people began to surf the web in larger numbers, the standard
resolution was known as VGA (for Video Graphics Array) and it was commonly set as
640 x 480. As time went by and monitors became larger, cheaper, and more efficient,
most users adopted SVGA (the S being for Super—honestly!), at 800 x 600. This gave
way to XGA (Extended Graphics Array—thankfully not Xtreme) at 1024 x 768, and larger.
Today, my monitor is displaying WQHD (Wide Quad High Definition) at the
aforementioned 2560 x 1600.
65
