How do I increase the font size based on the window width?

Question

I am creating a web-based app that will be displayed on television and other large monitors. I am wanting a quick and easy way to increase the font size to fit the window si

Answer 1

I know this in quite an old question, but I will be answering anyways due to this being a question that could be searched upon a lot.

There is actually another approach other than Media Queries which is also pure CSS:

---

Viewport units: vw, vh, vmin, vmax.

These are length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).

So for example you could use:

CSS:

body {
    font-size:5vmin;
}

This sets the font-size of the entire document to 5% of the smallest viewport size (the width or the height). So for instance on an iPad (1024 x 768 px) the font-size will be 38,4 px (5% of 768 px because this is the smallest size of either viewport sizes).

Browser compatibility: https://caniuse.com/#feat=viewport-units