Bert Bos & Eva Kasal | CSS3 in Style
Demo: The Boston Globe
Media Queries select different style sheets for:
… also possible from XML (not shown)
Four different methods:
@media ... { ... }
<style
media="...">
<link
media="...">
@import url(...)
...
Demo: narrow, wide or tall
From the demo:
@media all and (min-width: 60em) { h2 {float: left; width: 20%} .menu {float: right; width: 20%} .main {float: right; width: 49%} }
Demo: slides
From the demo:
<STYLE TYPE="text/css" MEDIA=projection> h1 {page-break-before: always} h1:first-child {page-break-before: avoid} body {font: 40px/1.2 sans-serif} </STYLE>
'Projection' media are paged (just like print)
The slides you are viewing have a style for 'projection'
From the demo:
<STYLE TYPE="text/css" MEDIA=print> @page { margin: 2cm 1cm; @bottom {content: "— "counter(page, lower-roman) " —"} } body {columns: 21em} </STYLE>
Some products: Prince, WebToPDF.NET, AH Formatter, PDFreactor and more
See also multi-column later in this tutorial for page breaks, widows & orphans
Warning 1: most Webkit-based mobile browsers and HTML viewers do not honor Media Queries unless you add this line to the HTML:
<meta name=viewport content="width=device-width">
Warning 2: The iPhone presents itself as a desktop
computer (media=screen
) instead of a mobile device
(media=handheld
)