Responsive Design Cheat Sheet

mobile-responsive.css

/* SOURCE LINK: https://www.codeply.com/responsive-design-cheatsheet.html */



/* Bootstrap /*

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
  
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }
  
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }
  
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }



/* Purse CSS */

/* Small */
@media (min-width: 35.5em) { ... }
  
/* Medium */
@media (min-width: 48em) { ... }
  
/* Large */
@media (min-width: 64em) { ... }
  
/* X-Large */
@media (min-width: 80em) { ... }