function for fluid text with clamp

fluid text with clamp

/*
Before
html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 22px;
  }
}
*/
function fluidClampValue(minValue, maxValue, minSize, maxSize, unit = "px") {
  let intermediateValue = `calc(${minValue}${unit} + ${
    maxValue - minValue
  } * ((100vw - ${minSize}px) / ${maxSize - minSize}))`;
  return `clamp(${minValue}${unit}, ${intermediateValue}, ${maxValue}${unit})`;
}