Min-Max-Value Interpolation
source link: https://min-max-calculator.9elements.com/?ref=sidebar
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Min-Max-Value Interpolation
Min-Max-Value Interpolation
This is a tool that calculates the clamp formula needed to interpolate between a minimum value and a maximum value in a given viewport range. You can choose to use pixels or rems as a unit for the minimum and maximum values.
Viewport
Calculated Result:
clamp(1rem, 0.818rem + 0.91vw, 1.5rem) Live font-size example
This text uses the calculated clamp formula. It gets invisible when you use 0 or negative numbers as a min-value. 🥲 Try editing it, though...
So, what is this about?
At 9elements, we use Utopia in many of our projects to create fluid scales for type and spacing using CSS clamp() and not relying on media queries. Even on this website that you’re visiting right now, we use a type scale generated by the handy tool created by James Gilyead & Trys Mudford. You might have guessed it already – we love Utopia!
Yet sometimes, you don’t need a whole token system but a single interpolation between two values in a viewport range. That’s why we created this tool to help you with just that.
Bonus: You can use negative values for the min-value. That may be needed in rare situations for margins or absolute positioning. See example below.
Some Examples
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK