And now we've come full circle. In Chapter 3, Introducing ASP.NET MVC 4, we talked about responsive design and what it means to develop apps that attempt to present themselves properly within any browser window, and to continually respond to changes in the size of the browser window or in the content that the page itself is displaying.
In the previous section, we learned there was a @media
tag located in our Site.css
file.
@media only screen and (max-width: 850px)
This media tag contains beneath it a set of styles that applies to all screen media types that have a maximum width of 850 pixels—that is to say most mobile devices.
We also learned that our _Layout.cshtml
file contains the viewport meta
tag telling the mobile browser to render the page in its native resolution. Let's take a moment to put it all together.
When we load any page in a web browser that has a resolution of 850 pixels or less, we will get one set of styles applied to make the page usable at that resolution...