In modern web design, creating layouts that look perfect on every screen size—from massive 4K monitors to small mobile phones—is a significant challenge. Traditional approaches rely heavily on fixed pixel values (e.g., width: 300px) combined with numerous media queries (@media (max-width: 768px) { ... }) to snap elements into different layouts at specific breakpoints.
This “snapping” effect can feel abrupt and often leads to elements looking slightly off-proportion between breakpoints.
Fluid scaling (often called proportional scaling) solves this by ensuring that elements smoothly grow and shrink in direct proportion to the viewport’s width.
Think of your website like a rubber band. As you stretch the window (on a desktop) or compress it (on a phone), the elements inside should stretch and compress seamlessly along with it.
The Mathematics of Fluid Scaling
At the heart of our fluid scaling system is a simple mathematical ratio. It ties a specific pixel value to the width of the screen. In CSS, the full width of the screen is represented by 100vw (Viewport Width, meaning 100% of the visible screen).
The core formula is: ( Target Pixel Value ) × ( 100vw / Base Design Width )
Example Scenario
Let’s say our designer created a mockup in Figma with an artboard width of 1920px (our Base Design Width). In that design, a specific heading has a font size of 32px (our Target Pixel Value).
We want that heading to be exactly 32px only when the screen is exactly 1920px wide. If the screen shrinks perfectly in half to 960px, we want the font size to intuitively shrink in half to 16px. This guarantees the design always looks exactly like the mockup, no matter the device.
Plugging it into the formula: 32 * ( 100vw / 1920 )
- The ratio
(100vw / 1920)essentially figures out “what percentage of the base design width is the current screen?” - If the user’s screen is
1920pxwide,100vwequals1920px. The ratio becomes(1920 / 1920) = 1. Then,32 * 1 = 32px. - If the user’s screen is
960pxwide,100vwequals960px. The ratio becomes(960 / 1920) = 0.5. Then,32 * 0.5 = 16px.
The CSS Variable (--wp--custom--fxx)
To avoid writing (100vw / 1920) everywhere in our CSS, we abstract this ratio into a global CSS custom property (variable) named --wp--custom--fxx.
This variable holds the exact mathematical ratio. In our case, the value it holds is exactly calc(100vw / 1920).
Defining the Variable in WordPress (theme.json)
If you are building a modern WordPress block theme, you don’t define this variable in a standard style.css file. Instead, you define it in the theme.json configuration file.
Doing it this way is highly beneficial because it allows WordPress to automatically make this variable available inside the Gutenberg Site Editor. This means your content creators will see the exact same fluid scaling in the backend editor as the visitors see on the live site.
To add this to your theme, insert the following into the settings object of your theme.json:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"custom": {
"fxx": "calc(100vw / 1920)"
}
}
}Note: When you define a custom object named fxx inside settings.custom, WordPress automatically generates a CSS variable and prefixes it with --wp--custom--. This is where --wp--custom--fxx physically originates and how it gets injected into the <body> of your website.
Once defined, this variable makes the math cleaner everywhere else. Anywhere we want to scale a value based on the 1920px design, we simply multiply our target pixel value by this variable using the calc() function:
.my-element {
/* Scales a 300px box down proportionally on smaller screens */
width: calc(300 * var(--wp--custom--fxx));
}In the next part, we’ll look at how the SCSS
fxx() function makes writing this even easier and cleaner.
