/
๐Ÿ—œ

Clamp number

javascriptcss
On this page
  • JavaScript
  • CSS

JavaScript

ts
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+)

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

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

css
body {
font-size: clamp(16px, 4vw, 22px);
}
Edit this page
Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.