Responsive Design Reference

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

@media (max-width: 767px) { # mobile styles
  .nav { display: none; }
}

# Mobile first approach
@media (min-width: 576px) { } # small devices
@media (min-width: 768px) { } # tablets
@media (min-width: 992px) { } # desktops
@media (min-width: 1200px) { } # large screens
@media (min-width: 1400px) { } # xl screens

@media (orientation: landscape) { } # horizontal view
@media (orientation: portrait) { } # vertical view
@media (prefers-color-scheme: dark) { } # dark mode
@media (hover: hover) { } # mouse users
@media (print) { } # print styles

# Base mobile styles
.container {
  width: 100%;
  padding: 15px;
}

# Scale up for larger screens
@media (min-width: 768px) {
  .container { max-width: 720px; }
}

font-size: clamp(1rem, 2vw, 2rem); # fluid typography
width: min(100%, 1200px); # responsive width
padding: 2vw; # viewport width
height: 100vh; # viewport height
font-size: 1.5rem; # relative to root
width: 50%; # relative to parent