Dev Notes

Various Cheat Sheets and Resources by David Egan/Carawebs.

Typical Responsive Breakpoints


CSS
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