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.
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
@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.
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)
font-size: 12px;
Search WWH ::

Custom Search