CSS3: Media Queries

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

Play

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)

Play

Visit Site

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

Up Next:

CSS3 Selectors

short | longer

Main deck