HTML and CSS Reference
nav ul li a
■ 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.
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