Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

This is probably not for every website, but an interesting trick is to set your root element font size to 1vw, which is 1% the width of the viewport.

Then size everything using rems, including the width of your layout. The whole design scales with the width of your browser.



So if you have one of those ridiculous ultrawide monitors, the text is very large, or if you have a vertically-mounted monitor, are using a smartphone held vertically, or just prefer to make your browser windows narrow, the text becomes very small?

That sure is an interesting trick, all right.


Can we use something like

  font-size: "calc(min(1vw, 1vh))";
to solve problem you describe?


This might solve a few of the edge cases, but making the sizes of everything depend on your screen is a dumb idea. If I move my browser from my small laptop screen to my big external display, I expect to see more content, not larger fonts. My displays are set to scaling factors that are comfortable for me with most things I work with (HN’s tiny fonts being a notable exception). Just set a reasonable size for things (a base font size of 1rem should be fine) and let me use my displays to the fullest.


In fact there’s a `vmin` unit that does this calculation for you. (`vmax` as well)


> `vmax` as well

Or even dvmax in this day and age.


Ironically this is the least accessible solution because it doesn’t let the user change the font size at all (not that it’s particularly common in this day and age, due to full-page zooming being the default since at least 2010)




Consider applying for YC's Summer 2026 batch! Applications are open till May 4

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: