Dev Notes

Various Cheat Sheets and Resources by David Egan/Carawebs.

Typical Responsive Breakpoints

David Egan

Extra Small Screens/Phone

480px and below

Small Screen/Tablet

481px to 768px

Medium Screen/Desktop

769px to 992px

Large Screen/Wide Desktop

993px to 1200px

XL Desktop

wider than 1200px

Closely based on Twitter Bootstrap 3.x breakpoints.

These breakpoints need not be totally fixed - but they’re a good guide to basic responsive layouts. In particular, an extra breakpoint might be needed at 320px and below. Or alternatively, you could go fully responsive - use inline-block to define columns and make everything percentage based, changing proportions as and when needed based on your design!

comments powered by Disqus