Responsive Text - Without @media queries

Using the calc() function in CSS

Medea's photo
·Mar 10, 2023·

1 min read

Play this article

Once upon a time, I had a website where it looked great on a laptop, but when I switched to a 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);

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

Share this