CSS3 - 渐进缩放 height/min-height

Question

我在创建混合移动应用程序时经常使用渐进式字体缩放，以确保我在小屏幕的古老设备以及提供更多屏幕空间的现代设备上都能得到合理的显示。通常，这非常有效

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

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

将字体大小从最小 10px 平滑地放大到最大 14px。今天，我有一个相当不同的要求 - 在具有 display:grid 的父元素中限制 HTML div 元素的高度，以进行全面公开。我天真地尝试了以下

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

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

才发现它被浏览器忽略了。检查 Chrome 控制台中的元素显示该规则已被 Chrome 删除为无效？我看不出我这里有错字。那么为什么会这样呢？

Answer 1

正如@TemaniAsif 指出的那样，由于缺少白色space，我最终将此问题作为一个问题。为遇到此线程的任何其他人提供完整的解释 - 关键是在 CSS 中，长度可以在前面加上可选的 + 或 - 符号。没有 space - 被解释为“属于”长度。

如需更详尽的解释，请参阅此。 MDN 文档也强调了这个问题，尽管可能不如@MarcoBonelli 在上面提到的 SO 线程中解释的那么清楚。

CSS3 - 渐进缩放 height/min-height

CSS3 - progressive scaling height/min-height

css

scaling

responsive