CSS3: Media Queries

HTML5 and CSS3 for the Real WorldHTML5: The Definitive Guide
MObile HTML5Web Performance Daybook
Slides: estelle.github.com/mobilecss/responsive.html
Name: Estelle Weyl
Blog: standardista.com
Twitter: @estellevw

Varied Screen Sizes

  • Smart Phone
  • Tablet
  • Laptop
  • Monitor
  • TV
  • Wrist Watch

portrait v. landscape?

high and low resolution?

This section:

1. Screen Size
2. Screen Resolution
3. Device Capability
4. Browser Capability

Varied Screen Sizes

  • Wrist Watch
  • Smart Phone
  • Tablet
  • Laptop
  • Monitor
  • TV
  • portrait v. landscape?
  • high and low resolution?

media queries

<link rel='stylesheet'
media='screen and (min-width: 320px) and (max-width: 480px)'
href='css/smartphone.css' />
@media screen and (max-width: 480px){
  selector { /* small screen */
    property: value;
  }
}

@media screen and (orientation: landscape) {
  selector { /* landscape properties */
    property: value;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  selector { /* properties for higher resolution screens */
    property: value;
  }
}
  

media query properties

  • (min/max)-width: viewport width
  • (min/max)-height: viewport height
  • (min/max)-device-width: screen width
  • (min/max)-device-height: screen height
  • orientation: portrait(h>w) | landscape(w>h)
  • (min/max)-aspect-ratio: width/height
  • (min/max)-device-aspect-ratio: device-width/height
  • (min/max)-resolution: 72dpi | 100dpcm
  • (min/max)-color:
  • (min/max)-color-index:
  • (min/max)-monochrome: 0 | 1+
  • scan: progressive | interlace (tv)
  • grid: 0 | 1 (grids (like tty) or bitmap)
  • See Media Queries Spec
  • case insensitive
  • unknown media types == false

High Resolution Implementation

Supported in Webkit Browsers

-webkit-min-device-pixel-ratio: 2

Firefox up to FF 16

min--moz-device-pixel-ratio: 2

The standard way

min-resolution: 2dppx

dppx fallback

min-resolution: 192dpi
  • Parentheses around expressions are required

Media Query Syntax/Punctuation

"only" leaves out older browsers

media="only print and (color)"

"and" - both parts must be true

media="only screen and (orientation: portrait)"

"not" - if untrue

media="not screen and (color)"

Comma separates selectors - any part can be true

media="print, screen and (min-width: 480px)"

Media Break Points

Visit Site

Device and Capability Detection

@media screen and (-webkit-min-device-pixel-ratio: 2) {
 .iphone4 { /* high DPI */}
}
@media screen and (transform-3d) {
  .transforms {}
}
@media screen and (min-width: 320px) and (max-width: 500px){
  @-ms-viewport { width: device-width;}
}

Also works with (-prefix-animation) and (-prefix-transition)

Viewport

<meta name="viewport" content="width=device-width,
            initial-scale=1, maximum-scale=1"/>
width
Size of the viewport in number of pixels or device-width (width of screen)
height
Height of the viewport in number of pixels or device-height (height of screen)
initial-scale
zoom level when page is first loaded
maximum-scale
minimum-scale
user-scalable
Are users allowed to zoom the page
@viewport {
  width: device-width; zoom: 0.5;
}
min-width
‘auto’, ‘device-width’, ‘device-height’, an absolute length, or a percentage as specified
max-width
‘auto’, ‘device-width’, ‘device-height’, an absolute length, or a percentage as specified
width
min-height
‘auto’, ‘device-width’, ‘device-height’, an absolute length, or a percentage as specified
max-height
‘auto’, ‘device-width’, ‘device-height’, an absolute length, or a percentage as specified
height
zoom
auto, positive number or percentage
min-zoom
Minimum zoom factor allowed. auto, positive number or percentage
max-zoom
Maximum zoom factor allowed. auto, positive number or percentage
user-zoom
zoom or fixed. User can or can't zoom in/out.
orientation
auto, portrait or landscape.
@media screen and (max-width:400px) {
  @-ms-viewport { width:320px; // or device-width;}
}

Viewport Sidenote

If <meta> is set to disable zoom, in Chrome and Firefox there is no delay on onClick events.

Mobile Specific CSS

Tap Highlight Color

 -webkit-tap-highlight-color: #bada55;

Prevent Select & Hold dialogue

 -webkit-user-select: none;

Prevent Images Dialog

 -webkit-touch-callout: none;

Prevent accidental OS popups (panning)

-ms-touch-action: none;

Relative width

Play

CSS Hyphenations, <WBR> and &Shy;

Play

Columns

column-count: 1;      
column-width: 10em;   
column-rule: 1px solid #bbb;
column-gap: 2em;      

Adipisicing rump nostrud exercitation turkey, bresaola deserunt ullamco beef ribs pork loin ball tip pig pork belly nisi. Cillum sunt officia deserunt, beef aliqua ham ut t-bone sed ut consequat shoulder. Nostrud excepteur biltong non, fatback salami incididunt beef cupidatat occaecat.

Reprehenderit ham hock labore tri-tip chuck, excepteur ut. Meatball sint enim beef ribs, mollit laborum flank commodo fatback pariatur tail rump eiusmod spare ribs dolore. Ut minim qui, tongue eu short ribs pancetta excepteur incididunt culpa consequat pastrami magna chuck. Flank sunt sint, occaecat ut adipisicing labore turkey laboris in magna.

Chicken bacon meatloaf minim meatball salami sunt spare ribs.

Bacon sed tail, pork loin pariatur meatloaf hamburger exercitation corned beef shank ex esse sirloin qui beef ribs. Consectetur anim corned beef, cupidatat ex enim tempor. Pariatur consectetur ad, enim ut quis consequat aliquip exercitation jowl tenderloin ham dolore.

Fugiat excepteur aliqua, cow dolor swine shoulder elit tri-tip shankle. Irure consectetur cow labore, cupidatat exercitation ea jerky ham officia dolore tongue eu aliqua. Ham hock irure beef ribs non, flank sausage eiusmod ham short loin nostrud.

Prefix -webkit & -moz. Supported since IE 10, O 11.1, all webkit, all FF

CSS3 Columns

Play

Media Queries in SVG

Play

Media Queries in SVG

Play

Clown Car Technique

Play

Clown Car Technique

Play

Thank you

HTML5 and CSS3 for the Real WorldHTML5: The Definitive GuideMObile HTML5Web Performance Daybook