Bert Bos | CSS masterclass – Amsterdam 2012

Media Queries

Media Queries select different style sheets for:

Media Queries – methods

Four different methods:

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"
  h1 {page-break-before: always}
  h1:first-child {page-break-before: avoid}
  body {font: 40px/1.2 sans-serif}

'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}

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

Warning 2: The iPhone presents itself as a desktop computer (media=screen) instead of a mobile device (media=handheld)