DEV Community

Dzung Nguyen
Dzung Nguyen

Posted on

1 1

📏 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)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!