HTML and CSS Reference
In-Depth Information
Not All Pixels Are Equal
Pixels are a basic unit of measurement in Web design, but there are two types of pixels
to be aware of. One is a
device pixel
, which refers to the actual physical pixel on a
screen. The other is a
CSS pixel
, which is the fundamental unit in CSS measurements.
The difference between device pixels and CSS pixels is easiest to understand when you
zoom into and out of a Web page. For example, the following style creates an
aside
ele-
ment that is 300 CSS pixels wide:
aside: {width: 300px;}
However, the element is not necessarily 300 device pixels. If a user zooms into the
Web page, the apparent size of the article increases as measured by device pixels but
remains 300 CSS pixels wide, resulting in 1 CSS pixel being represented by several
device pixels. The number of device pixels matched to a single CSS pixel is known as the
device-pixel ratio
. For example, when a page is zoomed at a factor of 2x, the device-
pixel ratio is 2, with a single CSS pixel represented by a 2
2 square of device pixels.
One area where the difference between device pixels and CSS pixels becomes impor-
tant is in the development of Web sites optimized for displays with high device-pixel
ratios. One such device is the iPhone 4 with the Retina display, which is capable of dis-
playing images at a device-pixel density of 326 pixels per inch. Designers can optimize
their Web sites for devices like the iPhone 4 by creating one set of style sheets for low-
resolution displays and another for high-resolution displays. The high-resolution style
sheet would load extremely detailed, high-resolution images, while the low-resolution
style sheet would load lower resolution images better suited to devices that are limited
to smaller device-pixel ratios. For example, the media query
3
<link href=”retina.css” rel=”stylesheet”
media=”only screen and (-webkit-min-device-pixel-ratio: 2)” />
loads the
retina.css
style sheet file for high-resolution screen devices that have device-
pixel ratios of at least 2. Note that currently the
device-pixel-ratio
media feature
is only supported by WebKit, but this will change as more high-resolution devices
become available in the mobile market.
Creating a Mobile Style Sheet
For the mobile version of his sample page, Kevin wants you to hide the
h1
heading and
navigation list in the header, the vertical navigation list, and the page footer, leaving only
the header logo, photos, and navigation links to other pages about Stanislaw Dubcek's
life. He also wants you to replace the current banner logo with a new one sized to fit on
a smaller screen, and to set the font size and alignment of the figure box captions. You'll
make these changes now.
To begin designing the mobile style sheet:
◗
1.
Return to the
mobile.css
file in your text editor. At the bottom of the file, insert
the following style rule:
/* Hide page elements that will not be displayed */
header h1, header nav, section nav.vertical, footer {
display: none;
}
