5 ms·
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
by _greim_ 4y ago
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.
- Cyberdog 4y agoSo 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.
- blumomo 4y agoCan we use something like font-size: "calc(min(1vw, 1vh))"; to solve problem you describe?
- evan_ 4y agoIn fact there’s a `vmin` unit that does this calculation for you. (`vmax` as well)
- mikae1 4y ago> `vmax` as well Or even dvmax in this day and age.
- Kwpolska 4y agoThis 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.
- piskerpan 4y agoIronically 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)