W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2018

Re: [csswg-drafts] [css-values] if() function (#3455)

From: Matthew Dean via GitHub <sysbot+gh@w3.org>
Date: Thu, 20 Dec 2018 23:54:37 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-449181074-1545350076-sysbot+gh@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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:41 UTC