Figure 11—Our blog page on the iPhone
Falling Back
Media queries are supported in Firefox, Chrome, Safari, Opera, and Internet
Explorer 9 and up. You’ll have to rely on JavaScript fallback solutions to load
additional style sheets based on the user’s device. Our example targets
iPhones, so we don’t need a fallback solution—our content is readable without
the media query.The excellent Respond.js library provides support for min- and max-width
media queries,^5 and is a great fallback for Internet Explorer 8, but it’s probably
not necessary in most cases since those types of media queries are meant for
smaller screens, and devices not running Internet Explorer 8. That said, you
could still use media queries to handle presentation on various screen sizes,
from small monitors to sizable wall displays.Media queries give us the power to control how the page displays on various
screen sizes. But sometimes on larger screens content areas can be really wide.
Let’s look at how we can divide those content areas into multiple columns.report erratum • discussBuilding Mobile Interfaces with Media Queries • 83
Download from Wow! eBook <www.wowebook.com>