Media Queries

Media Queries select different style sheets for:

• different media:
  print, screen, projection, speech…
• different media characteristics:
  width, height, resolution…

Media Queries – methods

Four different methods:

• In CSS:
  @media ... { ... }
• In HTML:
  <style media="...">
• Linked from HTML:
  <link media="...">
• Linked from CSS:
  @import url(...) ...

Media Queries – media features

From the demo:

@media all and (min-width: 60em)
{
  h2 {float: left; width: 20%}
  .menu {float: right; width: 20%}
  .main {float: right; width: 49%}
}

media Queries – slide show

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'

Media Queries – print

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

Media Queries – handheld

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)