🗜 Clamp number

Note date 06 Jan, 2021
Tags javascript css
👋 FYI, this note is over 6 months old. Some of the content may be out of date.
On this page

JavaScript 

const clamp = (value: number, min: number, max: number) => {
  return Math.min(Math.max(value, min), max)
}

// clamp(21, 20, 50) > 21
// clamp(10, 20, 50) > 20
// clamp(80, 20, 50) > 50

CSS

Use this if you only need to support Safari (11.1+) and Chrome (79+)

html {
  font-size: min(max(16px, 4vw), 22px);
}

Or even this if you only support Chrome (79+)

body {
  font-size: clamp(16px, 4vw, 22px);
}
← Back home