While the fxx() function ensures perfect proportionality, pure fluid scaling can be dangerous.
If a paragraph has font-size: fxx(16) (based on a 1920px design), and a user views it on a 320px mobile phone, the font size will proportionally scale down to roughly 2.6px. This is completely illegible.
Therefore, we must set “guardrails”—mathematical boundaries that dictate how small or how large an element is allowed to scale. We handle this using the CSS native min(), max(), and clamp() functions.
1. Establishing a Floor with max()
The CSS max(val1, val2) function compares two or more comma-separated values and applies the largest one. We use this to establish a minimum bound (a “floor”).
The Logic: “Take the fluidly scaled value… UNLESS it falls below a specific pixel amount. If it does, stop scaling and lock it at that pixel amount.”
Example Scenario: We have an icon that is 48px on desktop. We want it to scale down fluidly, but it shouldn’t get so small it becomes difficult to tap. We decide 30px is the absolute minimum acceptable size.
.icon {
/* SCSS */
width: max(30px, fxx(48));
height: max(30px, fxx(48));
}- Desktop (1920px):
max(30px, 48px)-> Browser chooses48px. - Tablet (960px): The fluid value halves to
24px.max(30px, 24px)-> The browser chooses30px. The icon stops shrinking and remains locked at a legible size.
Crucial Detail: Notice that inside the
max()function, the floor value (30px) explicitly requires the unit, while thefxx()argument (48) does not.
2. Establishing a Ceiling with min()
Conversely, the CSS min(val1, val2) function applies the smallest value. We use this to establish a maximum bound (a “ceiling”), preventing elements from blowing up to ridiculous proportions on ultra-wide (e.g., 4K) monitors.
Example Scenario: A content card should be 460px wide. We want it to shrink on small screens, but we never want it to stretch beyond 460px or 100% of its parent container.
.content-card {
/* SCSS */
width: min(fxx(460), 100%);
}(In this case, we use 100% as our ceiling rather than a fixed pixel value, ensuring it never causes horizontal scrollbars).
3. The Best of Both Worlds: clamp()
When you need an element to have both a floor (minimum limit) and a ceiling (maximum limit), you can use the CSS clamp() function.
The syntax is always strictly in this order: clamp(MINIMUM, IDEAL_FLUID_VALUE, MAXIMUM).
This is incredibly common for typography. For instance, you might want a headline to dynamically scale based on 120px ideally, but you want to guarantee it will never be smaller than 40px on phones, and never larger than 120px on giant TVs.
The fxx-clamp() SCSS Helper
To simplify typography scaling, our _functions.scss provides the fxx-clamp() utility:
/// @param {Number} $max - The upper limit and the scale base (e.g., 180 for `180px`).
/// @param {Number} $min - The lower limit pixel restriction. Defaults to `40`.
@function fxx-clamp($max, $min: 40) {
@return clamp(#{$min}px, calc(#{$max} * var(--wp--custom--fxx)), #{$max}px);
}Usage:
h1 {
/* Ideally scales based on 120px, but never falls below 45px, and never exceeds 120px */
font-size: fxx-clamp(120, 45);
}Summary
- Use
fxx(val)when an element should scale infinitely. - Use
max(minValpx, fxx(idealVal))to prevent something from shrinking too much (setting a floor). - Use
min(maxValpx, fxx(idealVal))ormin(fxx(idealVal), 100%)to prevent something from growing too much (setting a ceiling). - Use
fxx-clamp(maxVal, minVal)to set strict boundaries on both ends, typically for typography.
