search

jsartisan / frontend-challenges

FrontendChallenges is a collection of frontend interview questions and answers. It is designed to help you prepare for frontend interviews. It's free and open source.
https://frontend-challenges.com
46 stars 5 forks source link

5 - Fluid Typography - vanilla #338

Open FrontEndCoder23 opened 2 weeks ago

FrontEndCoder23 commented 2 weeks ago

styles.css

body {
  font-family: sans-serif;
}

:root {
  --minVw: 320px;
  --maxVw: 720px;
  --minSize: 16px;
  --maxSize: 32px;
}

h1 {
  font-size: clamp(var(--minSize), calc((var(--maxSize) - var(--minSize)) / (var(--maxVw) - var(--minVw)) * (100vw - var(--minVw)) + var(--minSize), var(--maxSize));
}
jsartisan commented 2 weeks ago

@FrontEndCoder23 It's not working properly 🤔 I don't see a change in the font size on resizing the window.