Tip 12
Building Mobile Interfaces with Media Queries
We’ve been able to define media-specific style sheets for quite a while, but
we’ve been limited to the type of output, as you saw in Tip 11, Making Links
Printable with :after and content, on page 78, when we defined our print style
sheet. CSS3’s media queries let us change a page’s presentation based on
the screen size our visitors use.^3 Web developers have used JavaScript for
years to obtain information about the user’s screen size. But we can start to
do that with style sheets alone. We can use media queries to determine the
following:- Resolution
- Orientation (portrait or landscape mode)
- Device width and height
- Width and height of the browser window
Because of this, media queries make it very easy for us to create alternative
style sheets for users of various screen sizes, and media queries are a key
ingredient of responsive web design, the popular practice of building one site
that changes its appearance and flow based on the user’s screen resolution.
Popular frameworks like Bootstrap rely on media queries heavily.^4Joe asks:
What About the Handheld Media Type?
The Handheld media type was designed to let us target mobile devices like we target
printers, but most mobile devices want to show you the “real Internet,” so they ignore
that media type, serving the style sheet associated with the screen media type instead.It turns out that the AwesomeCo executive staff has finally gotten tired of
hearing complaints from customers and employees about how web pages look
like garbage on smartphones. The marketing director would love to see a
mobile-ready version of the blog template we built in Tip 1, Redefining a Blog
Using Semantic Markup, on page 15. We can do a prototype of that quickly.report erratum • discussBuilding Mobile Interfaces with Media Queries • 81
Download from Wow! eBook <www.wowebook.com>