Hacker News new | ask | show | jobs
by dmos62 1775 days ago
em and rem are relative to properties on other nodes in the document's CSS hierarchy; they're not relative to some screen-size specific metric.

I've not studied the topic in any depth, but I believe that an adaptive ruleset would just use CSS media queries (use this font size when viewport width is more than something). That is what Bootstrap does. Or, use viewport-relative units like vw, vh, vmin, vmax, but I doubt that would work well.

2 comments

1rem is the font size of the html element, which if you don't set it otherwise, is relative to user-agent decisions about what 1rem is. Which could be related to screen size or density, but it's up to the user-agent, I don't know if any adjust it so automatically by default (although it would make a lot of sense).

It is, in actual practice, based on user preferences though, if you set your browser to display fonts bigger, 1rem will be bitter. 16px or pt... might not be? So hard to keep track, this stuff is such an accretion of workarounds on top of legacies on top of odd choices.

>they're not relative to some screen-size specific metric.

The fundamental problem here is that the browser can only adjust for device pixel density and not other variables that affect visibility (eg. the viewer's visual acuity or the viewing distance). That said, using absolute units is still the best choice for text size, considering the other relative units (eg. relative to viewport size) is worse.

>I've not studied the topic in any depth, but I believe that an adaptive ruleset would just use CSS media queries (use this font size when viewport width is more than something).

HN has this. See the /* mobile device */ section in news.css.