- From: Matthew Dean via GitHub <sysbot+gh@w3.org>
- Date: Thu, 20 Dec 2018 23:54:37 +0000
- To: public-css-archive@w3.org
Incidentally:
> so you can't have a value in font-size that refers to a property that takes a length (so no adjusting font-size to scale with width!)
You can adjust font-size to scale with width, as long as width is the viewport width. For instance, I have in a project where I do something like:
```less
html {
font-size: calc(0.625vw + 12px);
@media (max-width: 479px) {
font-size: 14px;
}
@media (min-width: 1260px) {
font-size: 20px;
}
}
```
And then, for most of my UI, it looks like
```css
.title {
font-size: 1rem;
padding: 3rem;
}
```
So font-size scales with width (within a range), and then UI scales with font-size. This isn't totally component-friendly, of course, since the missing needed values you need there are container width / height, not viewport. (Rarely is `vw`/`vh` or `@media` queries what someone actually needs, but they work for limited applications.) But yep, caveats aside, you can tie font-size to width!
--
GitHub Notification of comment by matthew-dean
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3455#issuecomment-449181074 using your GitHub account
Received on Thursday, 20 December 2018 23:54:39 UTC