CSS3 - progressive scaling height/min-height

Question

I frequently use progressive font scaling when creating hybrid mobile apps to ensure that I get reasonable displays on ancient devices with small screens as well as more modern devices that offer a lot more screen real estate. Typically, this works really well

@media (min-height:500px)
{
 body
 {
  font-size:calc(10px + ((100vh - 500px)/500)*4);
 }
}

@media (min-height:1000px)
{
 body
 {
  font-size:14px;
 }
}

which smoothly scales up the font size from a minimum of 10px to a maximum of 14px. Today, I had a rather different requirement - clamping the height of an HTML div element - in a parent with display:grid, for full disclosure. I naively tried the following

@media (min-height:500px)
{
 .gridRow > div
 {
  height:calc(32px +((100vh - 500px)/500)*32);
 }
}

 @media (min-height:1000px)
 {
  .gridRow > div
  {
   height:64px;
  }
 }

only to find that it got ignored by the browser. Inspecting the element in the Chrome console revealed that the rule had been struck out as being invalid by Chrome? I cannot see that I have a typo here. So why is this happening?

`calc(32px +((100vh - 500px)/500)*32)` --> `calc(32px + ((100vh - 500px)/500)*32)` — Temani Afif, Mar 19 '21 at 14:32
@TemaniAfif could you elaborate? I cannot see that you have suggested anything different from what I currently have — DroidOS, Mar 21 '21 at 07:06

score 0 · Accepted Answer · answered Mar 22 '21 at 04:55

I ended up with this as an issue owing to a missing whitespace as pointed out by @TemaniAsif. To provide a complete explanation for anyone else who runs into this thread - the point is that in CSS a length can be preceded by an optional + or - sign. Without a space the - is interpreted as "belonging" to the length.

For a more thorough explanation see this SO thread. The MDN docs highlight this issue too though perhaps not as clearly as explained by @MarcoBonelli in the SO thread referred to above.

CSS3 - progressive scaling height/min-height

1 Answers1