CSS3 - 渐进式缩放高度/最小高度答案

【问题标题】：CSS3 - progressive scaling height/min-heightCSS3 - 渐进式缩放高度/最小高度
【发布时间】：2021-06-16 21:10:29
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

calc(32px +((100vh - 500px)/500)*32) --> calc(32px + ((100vh - 500px)/500)*32)
@TemaniAfif 你能详细说明一下吗？我看不出你提出的建议与我目前的建议不同
你少了一个空格

标签： css responsive scaling

【解决方案1】：

正如@TemaniAsif 所指出的，由于缺少空格，我最终将此作为一个问题。为了给遇到这个线程的其他人提供一个完整的解释 - 关键是在 CSS 中，长度可以前面有一个可选的 + 或 - 符号。如果没有空格， - 被解释为“属于”长度。

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

【讨论】：