Media Queries

This section:

1. Media Type & Screen Size
2. Screen Resolution
3. Device Capability
4. Browser Capability

10 Media Queries (2.1)

  1. all
  2. aural
  3. handheld
  4. braille
  5. embossed
  6. print
  7. projection
  8. screen
  9. tty
  10. tv
<link media="screen" ...
<style media="screen"> 
     @import "myCSS.css"; ...
@import url(myCSS.css) screen;
@media screen {}
<?xml-stylesheet media="screen" ...

Varied Screen Sizes

  • Wrist Watch
  • Smart Phone
  • Tablet
  • Laptop
  • Monitor
  • TV
     
  • portrait? landscape? resolution?

Media Queries

@media screen and (max-width: 600px) {
  #presentation {
    background: red;
  }
}
@media screen and (orientation: portrait) {
  #presentation {
    background: yellow;
  }

@media screen and (orientation: landscape) {
  a[href^="mailto:"]:before {
    content: url(icons/email.gif);
  }
}
  

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 (min-device-pixel-ratio: 1.5) {
  selector { /* properties for higher resolution screens */
    property: value;
  }
}
  

Breakpoints

OpenSignal.com

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

Media Features

width
Width of the viewport
height
Height of the viewport
aspect-ratio
Width-to-height aspect ratio of the viewport
orientation
Orientation of the viewport
resolution
Pixel density of the output device
scan
Scanning process of the output device
grid
Does the device use a grid or bitmap screen?
update
How frequently the output device can modify the appearance of content. none | slow | fast (Media Queries 4)
overflow-block
How does the output device handle content that overflows the viewport along the block axis? none | scroll | optional-paged | paged (Media Queries 4)
overflow-inline
Can content that overflows the viewport along the inline axis be scrolled?(Media Queries 4)
color
Number of bits per color component of the output device, or zero if the device isn't color. @media (min-color: 1) means it's a color device
color-gamut
Approximate range of colors that are supported by the user agent and output device. srgb | p3 | rec2020 (Media Queries 4)
color-index
Number of entries in the output device's color lookup table, or zero if the device does not use such a table. @media (color-index) { … } or @media (color-index >= 1) { … } or @media (min-color-index: 1) matches color index devices
display-mode
The display mode of the application, as specified in the web app manifest's display member (Defined in the Manifest Spec)
monochrome
Bits per pixel in the output device's monochrome frame buffer, or 0 if the device isn't monochrome
inverted-colors
Is the user agent or underlying OS inverting colors? (Deferred - Media Queries Level 5)
pointer
Is the primary input mechanism a pointing device, and if so, how accurate is it? none | coarse | fine (Media Queries 4)
hover
Does the primary input mechanism allow the user to hover over elements?(Media Queries 4)
any-pointer
Is any available input mechanism a pointing device, and if so, how accurate is it?(Media Queries 4)
any-hover
Does any available input mechanism allow the user to hover over elements? (Media Queries 4)
light-level
Light level of the environment (Deferred - Media Queries Level 5)
scripting
Is scripting (e.g., JavaScript) available? (Deferred - Media Queries Level 5)
device-width
Width of the rendering surface of the output device - Deprecated
device-height
Height of the rendering surface of the output device - Deprecated
device-aspect-ratio
Width-to-height aspect ratio of the output device - Deprecated
Media Features on MDN

Resolution Units


  • dpi: dots per inch (72, 96)
     
  • dpcm: dots per centimeter (1dpcm ≈ 2.54dpi)
     
  • dppx: dots per pixel
    1dppx = 96dpi (default resolution of images)

Note: 0 is invalid. O is not equal to 0dpi, 0dpcm, or 0dppx.

High Resolution Implementation

Safari v. Everyone Else

-webkit-min-device-pixel-ratio: 2
min-resolution: 2dppx
min-resolution: 192dpi

dppx fallback

min-resolution: 192dpi
@media (-webkit-min-device-pixel-ratio: 2), /* Safari */
       (min-resolution: 192dpi) /* Everyone else */ {}
  • Parentheses around expressions are required
const dpi = window.devicePixelRatio;

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)"

range v. discrete v. boolean

  • min-
  • max-
  • >=
  • >     NEW
  • <
@media (min-width: 600px) 
@media (max-width: 600px) 
@media (width >= 600px) 
@media (width > 600px)
@media (width < 600px)
@media (width: 600px)  
  • (color)
  • (width)

@supports

Capability Detection

@supports

@supports (display: flex){
  /* rules for browsers supporting unprefixed flex box */
}

Don't use

@media screen and (transform-3d) {
  .transforms {}
}

@media screen and (min-width: 320px) and (max-width: 500px){
  @-ms-viewport { width: device-width;}
}

viewport

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, there is no delay on onClick events.

If <meta> is set to disable zoom, you're a jerk!

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;

Use Cases

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

Best Practices

(briefly)

Next ➹

Debugging

(briefly)

Next ➹

Colors & Transparency

(briefly)

Next ➹

Links