A minimum is the smallest value in a collection. If the values are 40px and 64px, the minimum is 40px. This simple comparison becomes useful in interfaces whenever a value must respond to changing conditions without exceeding a limit. section 3.2.3 section 1.3.1
In CSS, min(a, b, ...) returns the smallest item in a comma-separated list. Although its name suggests a minimum, it is often used to impose a maximum: font-size: min(8vw, 64px) follows 8vw while that value is smaller, then stops at 64px. The browser recomputes the comparison as viewport dimensions change. section 3.2.3 section 8.2.2
Cap a fluid hero heading
A heading sized at 8vw is 40px in a 500px viewport and 80px in a 1000px viewport. With font-size: min(8vw, 64px), those results become 40px and 64px. The heading still grows on smaller screens but cannot become excessively large on wide ones. section 3.2.3 section 8.2.2
Listing 3.5 Using min() to constrain the maximum font size
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 80px 20px;
}
.hero h1 {
font-size: min(8vw, 64px); #1
}
.hero p {
font-size: min(4vw, 24px); #2
}
Use the listing to compare a viewport-relative font size with a fixed ceiling for both heading and paragraph text. section 3.2.3
Minimum selection also appears outside CSS constraints. RGB-to-HSL conversion first normalizes red, green, and blue values, then finds their minimum and maximum. Their difference, max − min, gives chroma, while their average helps calculate lightness. In JavaScript, Math.min(r, g, b) performs the minimum selection. section 7.2.2
Listing 7.4 Converting RGB to HSL
function rgbToHsl(r, g, b) {
r /= 255; #1
g /= 255; #1
b /= 255; #1
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const diff = max - min;
const l = (max + min) / 2; #2
if (diff === 0) { #3
return {h: 0, s: 0, l: Math.round(l * 100)}; #4
}
const s = diff / (1 - Math.abs(2 * l - 1)); #5
let h;
switch (max) { #6
case r: #6
h = ((g - b) / diff) + (g < b ? 6 : 0); #6
break; #6
case g: #6
h = (b - r) / diff + 2; #6
break; #6
case b: #6
h = (r - g) / diff + 4; #6
break; #6
} #6
h *= 60; #7
if (h < 0) h += 360; #8
return {
h: Math.round(h),
s: Math.round(s * 100),
l: Math.round(l * 100)
};
}
The function shows Math.min() selecting the lowest normalized RGB channel before chroma, lightness, saturation, and hue are calculated. section 7.2.2
Choose the related constraint function by the boundary you need:
- Use min() when a value may vary but must not exceed a ceiling. section 3.2.3
- Use max() when a value must not fall below a floor. section 3.2.3
- Use clamp(minimum, preferred, maximum) when a responsive value needs both a floor and a ceiling. section 6.5.6 section 8.2.2
For fluid layouts, treat min() and max() as limits around a changing calculation. calc() can create a scaling expression, while min(), max(), or clamp() keep its output sensible. This can smooth resizing across screen widths and reduce reliance on abrupt media-query breakpoints. section 6.5 section 6.5.6
Pure viewport-based type needs those limits: 2vw can become unreadably small on a phone, while larger viewport values can become enormous on ultrawide screens. A minimum comparison supplies the upper cap; a maximum comparison supplies the lower safety floor. section 8.2.1 section 8.2.2
