Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Comparing Breakpoints in CSS Toolkits and Frameworks

http://v4-alpha.getbootstrap.com/layout/overview/

  • 544 // Small devices (landscape phones, 34em and up)
  • 768 // Medium devices (tablets, 48em and up)
  • 992 // Large devices (desktops, 62em and up)
  • 1200 // Extra large devices (large desktops, 75em and up)

https://github.com/inuitcss/settings.responsive/blob/master/_settings.responsive.scss

  • "palm" "screen and (max-width: 44.9375em)",
  • "lap" "screen and (min-width: 45em) and (max-width: 63.9375em)",
  • "lap-and-up" "screen and (min-width: 45em)",
  • "portable" "screen and (max-width: 63.9375em)",
  • "desk" "screen and (min-width: 64em)",
  • "retina" "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)"

https://www.google.com/design/spec/layout/responsive-ui.html

MDL breakpoints

Breakpoint (dp) Handset / Tablet Portrait Handset / Tablet Landscape Window Columns Gutter
0 small handset xsmall 4 16
360 medium handset xsmall 4 16
400 large handset xsmall 4 16
480 large handset small handset xsmall 4 16
600 small tablet medium handset small 8 16/24
720 large tablet large handset small 8 16/24
840 large tablet large handset small 12 16/24
960 small tablet small 12 24
1024 large tablet medium 12 24
1280 large tablet medium 12 24
1440 large 12 24
1600 large 12 24
1920 xlarge 12 24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment