Our current blog is a two-column layout, with a main content region and a
sidebar. The easiest way to make this more readable on a mobile browser is
to remove the floating elements so that the sidebar falls beneath the main
content. That way, the reader won’t have to scroll sideways on the device.
This is a dead-simple responsive design solution.To make this work, we’ll add this code to the bottom of the blog’s style sheet:
css3_mediaquery/stylesheets/style.css
@mediaonlyscreenand (max-device-width:480px){
body{ width:480px;}
nav,section,header,footer{ margin:0 10px0 10px;}#sidebar,#posts{
float:none;
width:100%;
}
}You can think of the code we put within the media-query braces as its own
style sheet, invoked when the conditions of the query are met. In this case,
we resize the body of the page and turn our two-column layout into a single-
column layout.We could also use media queries when we link the style sheet, so we can keep
our mobile style sheet in a separate file, like this:<linkrel="stylesheet"type="text/css"
href="stylesheets/mobile.css"media="onlyscreenand (max-device-width:480px)">With that, our blog immediately becomes more readable on tiny screens,
although the viewport is still zoomed way out. We can fix that by adding this
tag right below the web page’s <title> tag:css3_mediaquery/index.html
<metaname="viewport"
content="width=device-width, initial-scale=1,maximum-scale=1">Figure 11, Our blog page on the iPhone, on page 83 shows how our page looks
now. It’s far from perfect, but it’s a great start.You can use this approach to build style sheets for other displays, as well,
such as kiosks and tablets, so that your content is more easily readable on
those platforms. However, taking a page of content designed for a large screen
and trying to shrink it will result in lots of problems for you. A mobile-first
approach, where you design for the small screen first and then add more
content for larger screens, is best. This method forces you to think long and
hard about both your content and your audience.Chapter 4. Styling Content and Interfaces • 82
Download from Wow! eBook <www.wowebook.com> report erratum • discuss