HTML and CSS Reference
In-Depth Information
•
Use a CSS grid template layout - This is similar to designing forms with Windows
Presentation Foundation (WPF) that allows the browser to resize or move elements
dynamically based on the window size. Unfortunately, this is not something that is
currently available and the specification is still in draft, but watch for this in future
browser updates.
■
one of the things that the various emulators do is limit the window size based on the device characteristics.
You can accomplish the same thing by simply resizing your browser window. For your initial testing you can shrink
the window and see how the layout responds. Then use the emulators for the final testing.
Tip
Understanding Media Queries
CSS 2.1 introduced the
media
keyword, allowing you to define a printer-friendly style sheet. For example you can
use something like this:
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
You can then define a different style sheet for the print version of your webpage. Alternatively, you could
embed media-specific style rules within a single style sheet. For example this will change the font size when
printed:
@media print
{
h1, h2, h3
{
font-size: 14px;
}
}
■
There are other media types that are supported including
aural
,
braille
,
handheld
,
projection
,
tty
, and
tv
. As you can see, the media type was initially used to represent the type of device that is rendering the page. Also,
the
all
type is supported but is also implied if no media type is specified. styles with the
all
type are applied for
every device.
Tip
With CSS3, this has been enhanced significantly to allow you to query various attributes to determine the
appropriate styles. For example, you can apply a style when the width of the windows is 600px or smaller like this:
@media (max-width:600px)
{
h1
{
font-size: 12px;
}
}
