HTML and CSS Reference
In-Depth Information
aside
{
width: 30%;
}
nav ul li a
{
width: 100px;
}
}
■
in the Razor syntax, an ampersand (@) is used to indicate that what follows it is code; not content. To
include an ampersand in the context such as a media query, you'll need to use a double ampersand.
Note
By setting the
body
width to 100% it will automatically shrink to fit the window. It won't stretch past 940px,
however, because this style is only applied when the width is smaller than that. The
aside
element is set to 30%.
The current ratio (280px/940px) is approximately 30%. As you continue shrinking the window, the links in the
nav
element will eventually be clipped, so this style also reduces their width, moving them closer together.
Run the application and try shrinking the window. You should notice a nice fluid layout that adjusts to the
window size as shown in Figure
6-11
.
Figure 6-11.
Displaying the medium layout
