| 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, 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.[26] 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 ...
Get HTML5 and CSS3, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
