CSS Responsive Design Cheat Sheet

Media Queries

@media (max-width: 768px) { }
@media (min-width: 769px) and (max-width: 1024px) { }
@media (orientation: landscape) { }

Responsive Units

width: 100vw;
height: 100vh;
font-size: 2rem;
width: 50%;

Mobile First

/* Mobile styles */
.container { width: 100%; }

@media (min-width: 768px) {
  .container { width: 750px; }
}