DEV Community

Dzung Nguyen
Dzung Nguyen

Posted on

πŸ“ Responsive Text with clamp() in CSS! 🎨

πŸ€” Are you struggling to make text scale perfectly across all screen sizes? πŸ“±πŸ’» Using fixed sizes or media queries makes you deal with extra hassle?

βœ… Solution: Use the clamp() function in CSS!

/* Syntax: clamp(minimum, preferred, maximum) */
body {
  font-size: clamp(12px, 16px, 24px);
}
Enter fullscreen mode Exit fullscreen mode

🎯 This ensures your text stays readable and adaptive, scaling between a minimum, an ideal size based on viewport width, and a maximum value! πŸŽ‰


Follow me to stay updated with my future posts:

Top comments (0)