based on height? about postcss-responsive-type HOT 7 OPEN

You could make it fluid with vh units, but there would be no way to set a range between which it's fluid, so you'd get ridiculous font sizes on very large and very small screens. You could use the (horizontal) media queries as a kind of proxy for scren size, but that's a nasty hack at best.

So no, not really possible unfortunately.

from postcss-responsive-type.

@seaneking Would you be open to adding this/accepting a PR for it?

from postcss-responsive-type.

It would be a broken feature, so probably not unfortunately

from postcss-responsive-type.

@seaneking Okay maybe I'm stupid or something, but I'm still not understanding why you think this is impossible to do. The current method uses vw for scaling and media queries with max-width, what would be the issue with using vh for scaling and max-height in media queries?

html {
  font-size: responsive-height 12px 21px; /* min-size, max-size */
  font-range: 420px 1280px; /* viewport heights between which font-size is fluid */
}

html {
  font-size: calc(12px + 9 * ((100vh - 420px) / 860));
}

@media screen and (max-height: 420px) {
  html {
    font-size: 12px;
  }
}

@media screen and (min-height: 1280px) {
  html {
    font-size: 21px;
  }
}

from postcss-responsive-type.

Here is a codepen demonstrating this working: https://codepen.io/anon/pen/xRVxOg

from postcss-responsive-type.

Oh derp. Sorry pre-coffee. Okay might accept a PR, depending on the interface we came up with for it. Just very cautious of feature bloat.

Cleanest would likely be another prop that sets orientation, and an additional optional arg on the shorthand prop. Unless you have thoughts for an alternate interface?

That's getting pretty messy though. Would be keen to get feedback from others on how important a feature this is.

from postcss-responsive-type.

Example use case: Sidebar w/ big text icons. On smaller laptop screens you want the icon size to shrink, and have a max/min font-size.

Should def get feedback on API, I think what you said about an orientation flag is great.

from postcss-responsive-type.