HTML and CSS Reference
In-Depth Information
Resolution detection
The most common distinguishing features of different devices are
screen resolution and window size. Most desktop users have a browser
window at least 800 pixels wide, whereas most mobile browsers are
less than 800 pixels wide. Media queries let you choose between the
two situations. The basic syntax for creating a set of rules for a window
800 pixels wide is this:
@media screen and (max-width: 800px) { }
@media screen and (max-device-width: 800px) { }
Any CSS rules placed inside the squiggly brackets will only be applied
if the conditions are met. The first rule selects based on the browser
window size, and the second one selects based on display sizeā€”the
browser window doesn't have to fill the entire width of the display for
this rule to match. In this section, you'll create a layout that adapts to
the size of the browser window. Here's what the layout looks like in a
window 1024 pixels wide.
Here's the key markup (see the full listing in ch08/media-queries-
adaptive.html):
<header>
<h1>Adaptive Layout with Media Queries</h1>
</header>
<div>
<nav>
<ul>
Search WWH ::




Custom Search