(no title)
vthriller | 5 years ago
It's bad enough on desktops, now I feel it would be a nightmare on mobile even with desktop mode turned on...
vthriller | 5 years ago
It's bad enough on desktops, now I feel it would be a nightmare on mobile even with desktop mode turned on...
danShumway|5 years ago
Having said that, expanding quickly on why `vh` should be avoided for font sizes:
The problem with using `vh` is that it's exploiting that most desktop devices have monitors of a roughly similar aspect ratio. But that's a coincidence, not a law. So it's not really thinking about responsive design. Using `vw` is more correct because the size of a character is almost always dependent on how many characters you want to fit on a single line, and (in English) characters are read horizontally, not vertically.
Even better is using `em` and `rem` and inverting the way you think about widths -- base your column width on the number of characters you want to display in that column. In general on the web you don't want to say things like "I have 2 columns that are 50% of the screen and each has 40 characters in it." You want to instead say "I have two 40 character-long columns that might be next to each other or might be stacked, and they might take 50% of the screen or they might take less than that depending on what the user's font-size is."
It is (not always, but often) a mistake to start with a container width and work your way backwards to a font size (particularly in a world with high-DPI screens that might seem like they're very wide when actually they're not). Usually you want to do the opposite.
But in either case, 99% of the time you probably don't want to be using `vh` because the height of a browser is conceptually unrelated to how many characters you would want to display in a line.