responsive-cheatsheet.md

Responsive Design Cheatsheet

Mobile-First Media Queries

/* Base styles (mobile) - 0px and up */
.element {
  /* Default mobile styles */
}

/* Small phones - 320px and up */
@media (min-width: 320px) {
  .element {
    /* Small phone adjustments */
  }
}

/* Large phones - 576px and up */
@media (min-width: 576px) {
  .element {
    /* Large phone styles */
  }
}

/* Tablets - 768px and up */
@media (min-width: 768px) {
  .element {
    /* Tablet styles */
  }
}

/* Laptops - 992px and up */
@media (min-width: 992px) {
  .element {
    /* Laptop styles */
  }
}

/* Desktop - 1200px and up */
@media (min-width: 1200px) {
  .element {
    /* Desktop styles */
  }
}

/* Large desktop - 1400px and up */
@media (min-width: 1400px) {
  .element {
    /* Large desktop styles */
  }
}

Common Breakpoints

/* Bootstrap-style breakpoints */
:root {
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
}

/* Content-based breakpoints */
@media (min-width: 480px) {
  /* Small improvements */
}
@media (min-width: 640px) {
  /* Medium phones to small tablets */
}
@media (min-width: 960px) {
  /* Tablet landscape to desktop */
}
@media (min-width: 1280px) {
  /* Large desktop */
}

Responsive Container

/* Mobile-first container */
.container {
  width: 100%;
  padding: 0 1rem;
  margin: 0 auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
    padding: 0 1.5rem;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
    padding: 0 2rem;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* Fluid container */
.container-fluid {
  width: 100%;
  padding: 0 1rem;
  margin: 0 auto;
}

Responsive Grid System

/* CSS Grid - Mobile First */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 576px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Auto-fit responsive grid */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

/* Flexbox Grid */
.flex-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5rem;
}

.flex-col {
  flex: 1 1 100%;
  padding: 0 0.5rem;
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  .flex-col-sm-6 {
    flex: 1 1 50%;
  }
  .flex-col-sm-4 {
    flex: 1 1 33.333%;
  }
  .flex-col-sm-3 {
    flex: 1 1 25%;
  }
}

@media (min-width: 768px) {
  .flex-col-md-6 {
    flex: 1 1 50%;
  }
  .flex-col-md-4 {
    flex: 1 1 33.333%;
  }
  .flex-col-md-3 {
    flex: 1 1 25%;
  }
}

@media (min-width: 992px) {
  .flex-col-lg-6 {
    flex: 1 1 50%;
  }
  .flex-col-lg-4 {
    flex: 1 1 33.333%;
  }
  .flex-col-lg-3 {
    flex: 1 1 25%;
  }
}

Responsive Typography

/* Fluid typography using clamp() */
:root {
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);
  --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --font-size-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 3rem);
}

/* Mobile-first typography */
h1 {
  font-size: 1.75rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3rem;
  }
}

/* Responsive line length */
.content {
  max-width: 100%;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .content {
    max-width: 65ch; /* Optimal reading width */
    margin: 0 auto;
  }
}

Responsive Images

<!-- HTML for responsive images -->
<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg" />
  <source media="(min-width: 768px)" srcset="medium.jpg" />
  <img src="small.jpg" alt="Responsive image" loading="lazy" />
</picture>

<!-- With high-DPI support -->
<img
  src="image.jpg"
  srcset="image.jpg 1x, [email protected] 2x, [email protected] 3x"
  alt="High-DPI responsive image"
/>

/* CSS for responsive images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Art direction with CSS */
.hero {
  background-image: url("mobile-hero.jpg");
  background-size: cover;
  background-position: center;
  min-height: 300px;
}

@media (min-width: 768px) {
  .hero {
    background-image: url("tablet-hero.jpg");
    min-height: 400px;
  }
}

@media (min-width: 1200px) {
  .hero {
    background-image: url("desktop-hero.jpg");
    min-height: 500px;
  }
}

/* High-DPI images */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero {
    background-image: url("[email protected]");
  }

  @media (min-width: 768px) {
    .hero {
      background-image: url("[email protected]");
    }
  }

  @media (min-width: 1200px) {
    .hero {
      background-image: url("[email protected]");
    }
  }
}

Mobile Navigation

/* Mobile hamburger menu */
.nav {
  position: relative;
}

.nav-toggle {
  display: block;
  background: none;
  border: none;
  font-size: 1.5rem;
  padding: 0.5rem;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
}

.nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #eee;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.nav-menu.is-open {
  display: block;
}

.nav-link {
  display: block;
  padding: 1rem;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #333;
  min-height: 44px;
}

/* Desktop navigation */
@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
  }

  .nav-link {
    border-bottom: none;
    padding: 0.5rem 1rem;
  }
}

/* Off-canvas navigation */
.off-canvas {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  height: 100vh;
  background: white;
  transition: transform 0.3s ease;
  z-index: 1000;
}

.off-canvas.is-open {
  transform: translateX(300px);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 999;
}

.overlay.is-open {
  display: block;
}

Touch-Friendly Design

/* Minimum touch target sizes */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  padding: 0.75rem;
  margin: 0.25rem;
}

/* Form inputs */
input,
textarea,
select,
button {
  min-height: 44px;
  padding: 0.75rem;
  font-size: 16px; /* Prevents zoom on iOS */
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Swipe-friendly carousel */
.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

.carousel-item {
  flex: 0 0 80%;
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .carousel-item {
    flex: 0 0 33.333%;
  }
}

/* Hover effects only on devices that support hover */
@media (hover: hover) {
  .button:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
  }
}

Layout Patterns

/* Holy Grail Layout */
.holy-grail {
  display: grid;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "aside"
    "footer";
  min-height: 100vh;
  gap: 1rem;
}

@media (min-width: 768px) {
  .holy-grail {
    grid-template-areas:
      "header header"
      "nav main"
      "aside main"
      "footer footer";
    grid-template-columns: 200px 1fr;
  }
}

@media (min-width: 992px) {
  .holy-grail {
    grid-template-areas:
      "header header header"
      "nav main aside"
      "footer footer footer";
    grid-template-columns: 200px 1fr 250px;
  }
}

/* Card layout */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 576px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Sidebar layout */
.sidebar-layout {
  display: grid;
  grid-template-areas:
    "main"
    "sidebar";
  gap: 2rem;
}

@media (min-width: 768px) {
  .sidebar-layout {
    grid-template-areas: "main sidebar";
    grid-template-columns: 2fr 1fr;
  }
}

Media Query Features

/* Orientation */
@media (orientation: landscape) {
  .landscape-only {
    display: block;
  }
}

@media (orientation: portrait) {
  .portrait-only {
    display: block;
  }
}

/* Pixel density */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .high-dpi {
    /* High-resolution styles */
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #ffffff;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast */
@media (prefers-contrast: high) {
  .button {
    border: 2px solid;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none;
  }

  body {
    color: black;
    background: white;
  }

  a::after {
    content: " (" attr(href) ")";
  }
}

Container Queries (Modern)

/* Container queries for component-based responsive design */
.card-container {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .card-image {
    flex: 0 0 100px;
  }
}

@container (min-width: 500px) {
  .card {
    flex-direction: column;
    text-align: center;
  }

  .card-image {
    flex: none;
    width: 100%;
  }
}

Responsive Utilities

/* Responsive display utilities */
.d-none {
  display: none;
}
.d-block {
  display: block;
}
.d-flex {
  display: flex;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none;
  }
  .d-sm-block {
    display: block;
  }
  .d-sm-flex {
    display: flex;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none;
  }
  .d-md-block {
    display: block;
  }
  .d-md-flex {
    display: flex;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none;
  }
  .d-lg-block {
    display: block;
  }
  .d-lg-flex {
    display: flex;
  }
}

/* Responsive text alignment */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

@media (min-width: 768px) {
  .text-md-left {
    text-align: left;
  }
  .text-md-center {
    text-align: center;
  }
  .text-md-right {
    text-align: right;
  }
}

/* Responsive spacing */
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 1rem;
}

@media (min-width: 768px) {
  .p-md-2 {
    padding: 0.5rem;
  }
  .p-md-3 {
    padding: 1rem;
  }
  .p-md-4 {
    padding: 1.5rem;
  }
}

Performance Best Practices

/* Efficient media queries */
/* ✅ Good - Mobile first */
@media (min-width: 768px) {
  .element {
    /* Desktop styles */
  }
}

/* ❌ Avoid - Desktop first */
@media (max-width: 767px) {
  .element {
    /* Mobile styles */
  }
}

/* Critical CSS for above-the-fold content */
/* Inline in <head> for fastest rendering */

/* Use will-change for animations */
.animating-element {
  will-change: transform;
}

/* Remove will-change after animation */
.animation-complete {
  will-change: auto;
}

/* Optimize for 60fps animations */
.smooth-animation {
  transform: translateZ(0); /* Force hardware acceleration */
  animation: slide 0.3s ease-out;
}

@keyframes slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

Testing Breakpoints

/* Debug helper to see current breakpoint */
body::before {
  content: "XS";
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  color: white;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  z-index: 9999;
}

@media (min-width: 576px) {
  body::before {
    content: "SM";
    background: orange;
  }
}

@media (min-width: 768px) {
  body::before {
    content: "MD";
    background: yellow;
    color: black;
  }
}

@media (min-width: 992px) {
  body::before {
    content: "LG";
    background: green;
  }
}

@media (min-width: 1200px) {
  body::before {
    content: "XL";
    background: blue;
  }
}

@media (min-width: 1400px) {
  body::before {
    content: "XXL";
    background: purple;
  }
}