|
|
|
|
|
by danShumway
1921 days ago
|
|
I think the page is using `vw` as an example, and I don't see it using `vh` anywhere. Most of the sites following this approach would use something like `em` units. `vw` is just a really obvious example of what the article is talking about. 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. |
|