HTML5 and CSS3: Building Responsive Websites

Adding a mobile stylesheet for mobile browsers only using the media query

In this recipe, we want to be able to use a stylesheet in the template only for use by mobile browsers. JavaScript aside, there is no way in client-side rendering to listen for the user agent and deliver some logic or special template for mobile browsers. Let's take the K.I.S.S. approach and get as close as we can with a media query.

Of course, there are numerous ways to write JavaScript to detect a user agent, and we will cover that in a later recipe, but for now let's write a killer media query to lock down the mobile browser for a specific CSS. In the previous recipes, our media queries were performed inside a stylesheet. This one will be different as we will put it inside ...