Responsive Units and Media Queries

Responsive design is not only about breakpoints. It starts with choosing units that scale well.

Common Units

• px for precise borders and small UI details
• rem for typography and spacing tied to root size
• % for relative widths
• vw and vh for viewport-based sizing
• clamp() for fluid ranges

.hero-title {
  font-size: clamp(2rem, 4vw, 4.5rem);
}

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

Media Query Example

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

Better Breakpoint Thinking

Instead of targeting devices, ask:

• when does the layout feel cramped?
• when do line lengths become too long?
• when should navigation stack instead of stretch?

Responsive Defaults

• start with a flexible single-column layout
• add columns only when space allows
• use max-width to protect readability
• prefer gap over manual margins between siblings

Next Step

Continue to Modern Layout Patterns to combine responsive tools into reusable page sections.