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!!!.
<hr />
So I started messing around with <code>@media</code> queries and found them a bit too hard to use.
<hr />
Then I searched my problem in Google and found <a target="_blank" href="https://stackoverflow.com/questions/15649244/responsive-font-size-in-css">this StackOverflow post</a>. It had the answer to my problem!
<hr />
The answer is pretty simple actually. You use the <code>calc()</code> function in CSS, and use <code>rem</code> and <code>vmin</code> units to write this code:
<pre><code class="lang-css">body {
 font-size: calc(0.75em + 1vmin);
}
</code></pre>
<hr />
I made responsive text with just 3 lines of CSS and without <code>@media</code> queries!

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](https://stackoverflow.com/questions/15649244/responsive-font-size-in-css). 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:

```css
body {
  font-size: calc(0.75em + 1vmin);
}
```

---

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

VulcanWM

VulcanWM

Responsive Text - Without @media queries

Using the calc() function in CSS