min(), max() and clamp() give sizes limits.

min() picks the smallest of its values. width: min(100%, 500px) is the full width on a phone, but never more than 500px. max() picks the largest, so it sets a floor instead.

clamp() does both: clamp(smallest, ideal, largest). font-size: clamp(24px, 6vw, 48px) grows with the screen, but never drops below 24px or climbs above 48px.

Sizes like these change smoothly on every screen, instead of jumping at a breakpoint. They often save you a media query.

<h1>Big news</h1>
<div class="box">The library opens on Sundays from next week.</div>

h1 {
  font-size: clamp(24px, 6vw, 48px);
}
.box {
  width: min(100%, 500px);
  padding: 16px;
  background-color: aliceblue;
}

The box fills a phone's width, but stops at 500px on a wide screen.