A preferred value is the ideal middle value in a CSS clamp() expression. The browser uses it when it falls between the specified minimum and maximum; otherwise, it uses the exceeded bound. section 8.2.2 section 3.2.3
For responsive design, the preferred value commonly scales with viewport width through vw. Linear interpolation calculates the rate needed to move a property between chosen viewport sizes. section 6.5.4 section 8.2.2
Calculate a preferred clamp() value by following these steps:
- Choose the property’s minimum and maximum values, such as 16px and 48px. section 6.5.4
- Choose the viewport widths where those bounds should apply, such as 400px and 1200px. section 6.5.4
- Calculate preferredValue = (maxValue - minValue) / (maxVW - minVW) * 100. section 6.5.4
- Place the result between the bounds in clamp(minValue, preferredValue, maxValue). section 6.5.4
Responsive margin
To scale a margin from 16px at 400px wide to 48px at 1200px wide, the calculation gives 4vw. The declaration becomes margin: clamp(1rem, 4vw, 3rem);. section 6.5.4
preferredValue = (48 - 16) / (1200 - 400) * 100
= 32 / 800 * 100
= 3200 / 800
= 4
Inspect the arithmetic that converts the 16px-to-48px margin range into a 4vw preferred value. section 6.5.4
