Responsive Text - Without @media queries

Medea - Jan 30 '23 - - Dev Community

Once upon a time, I had a website where it looked great on laptop, but when I switched to phone, the text was SO TINY!!!.


So I started messing around with @media queries and found them a bit too hard to use.


Then I searched my problem in Google and found this StackOverflow post.
It had the answer to my problem!


The answer is pretty simple actually. You use the calc() function in CSS, and use rem and vmin units to write this code:

body {
  font-size: calc(0.75em + 1vmin);
}
Enter fullscreen mode Exit fullscreen mode

I made responsive text with just 3 lines of CSS and without @media queries!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .