4 ms·
I like how it behaves on desktop, but I don't like making it "responsive" on mobile. We can fix that :D :root { font-size: 1rem; } @media (pointer:
by mariocesar 3y ago
I like how it behaves on desktop, but I don't like making it "responsive" on mobile.
We can fix that :D
:root {
font-size: 1rem;
}
@media (pointer: fine) {
:root {
font-size: calc(1rem + 0.25vw);
}
}
@media (pointer: coarse) {
:root {
font-size: 1.25rem;
}
}
"pointer" refers to the way a user interacts with a device's screen, either using a precise pointing device like a mouse (fine pointer) or a less precise one like a finger on a touchscreen (coarse pointer).
- account42 3y agoLet's actually fix it: :root { font-size: 1rem; } Done. Don't mess with the user's preferred font size. If you think some browsers have bad defaults, campaing to have them fixed instead of hardcoding incompatible hacks for each website.
- deleted 3y ago[deleted]
- tln 3y agoI'm not so sure.. There are good reasons to use different font sizes for body text depending on purpose. Hacker News' small fonts fit more comments on the page. A documentation site may benefit from fitting more text on the page. A spreadsheet benefits from even smaller text. The article is easier to read with larger fonts. I tried the article with your rule, it's just not as nice. Then I changed around my "preferred font size" (chrome://settings/fonts -> Font Size). Blog responds just fine to it. Ironically many, many, many sites don't. It's actually so useless in general to change your default font size that browsers have a much more useful way of letting users have small or large text -- zoom levels.
- bee_rider 3y agoAll of your examples benefitted from smaller text. And the caveat is always that it has the be big enough to read. Therefore, just let the user set the size, they can set it to the smallest size they can read.