Bigger fonts on smaller screens without @media queries or javascript?

Question

Is there an alternative for @media queries to accomplish font-size inversely proportional to the screen size? (e.g.: opposite effect of 2vw, where the font gets

Answer 1

I think that the best that you can do is to use a font size that is not relative to a viewport. For example, 1em will be relatively large on a mobile device and will relatively small on a desktop client. If you use a fluid layout, em is perfect. If you use a static layout, your best option would probably be px. But using px is a bit iffy because a mobile device could potentially have just as many pixels as a desktop client.

The reason that calc(10vw / 2) works but calc(100 / 2vw) doesn't is because the former evaluates to 5vw and the latter evaluates to 50/vw which isn't an expression of distance. More precisely, the engine can only divide by scalar

In summation, to do what you want to do, you'll need to have a fluid layout and use em as your unit for font sizes. But you won't be able to get a direct ratio of the size of the viewport without JavaScript, which you should of course generally not rely on for layout purposes.