如何根据时间选择器的大小缩放时间字体大小？答案

【问题标题】：How do I scale the time font size based on the size of the time picker?如何根据时间选择器的大小缩放时间字体大小？
【发布时间】：2021-06-27 23:16:28
【问题描述】：

HTML 和 CSS

.pickthetime {
  height: calc(var(--vh, 1vh) * 3);
  width: calc(var(--vw, 1vw) * 25);
  align-content: center; // center looks better, also tried left to stop it from breaking a new line on Safari on iOS
  font-weight: 300;
}

&lt;input class="pickthetime" type="time" id="pickthetime" name="pickthetime" required /&gt;

正如您在 CSS 上看到的那样，我将实际选择器设置为特定大小。无论我做什么，我似乎都无法根据时间选择器的大小自动缩放字体大小。如果我使用calc(var(--vw, 1vw) * somenumberhere) 过多地增加或减少字体大小，它在某些设备上总是太大或太小。某些字体大小在我的 Android 手机上运行良好，但不适用于我的 iPhone 11 或（使用 Chrome 设备工具栏）iPhone X。

我也尝试过使用FitText，但也会出现同样的问题。它在 Chrome（使用设备工具栏）或我的 Android 手机上确实可以更好地扩展。

我...不知道从这里尝试什么。在一台设备上有效，在另一台设备上无效。我想要的只是根据时间选择器的宽度渲染时间的字体大小（但我不希望它被小东西隐藏Chrome 等浏览器使用的时钟图标或 iOS 上 Safari 等浏览器使用的向下箭头图标。

【问题讨论】：

font-size: 100% ?
@MattF。当我这样做时，它会变得非常小，就像上面的屏幕截图一样，我演示了当它变小时会发生什么。
这似乎与屏幕大小有关，而不是与其他元素的大小有关。
@RichardBarker 我想我刚刚找到了做到这一点的方法。我相信用作乘数的最佳位置是font-size: calc(var(--vw, 1vw) * 4)。这对 Android、iOS（两部手机）都足够好。为了安全起见，我可以将其更改为3，这是输入字段的高度，但我想我需要先将其滚动，然后才能看到它如何影响其他手机。我现在唯一努力做的就是把时间集中在那个领域。我已经尝试过align-items 和align-content。你还有什么想法吗？

标签： javascript html jquery css responsive-design

【解决方案1】：

我建议不要使用vw/vh 来设置输入样式，而是使用rem 或另一个relative length unit。

这就是您在移动/桌面缩放方面遇到问题的原因：因为视口宽度/高度的缩放在设备之间是如此不同。

例如，使用height: 1.25rem 可使设备的高度保持相对静态，具体取决于给定断点处的根font-size 属性。

将rem 值指定为输入本身的字体大小同样会随根元素的字体大小缩放，并让您和其他开发人员更容易理解输入的高度与其字体之间的关系-大小。

例子：

/* Let's say the <body> has a font-size of 20px */
body {
  font-size: 20px; /* 20px = 1rem */
}

.pickthetime {
  font-size: 1rem; /* or 1x body's font-size = 20px */
  height: 1.5rem; /* or, 1.5x body's font-size = 30px */

  /* I would suggest not setting a width; if you do, 
      set a max-width as well, or style the containing
      element with a set width/max-width */
  width: 100%; 
  max-width: 300px;
}

在上面的示例中，您现在可以知道字体大小将与文本的其余部分相同，并且输入元素的高度将是文本大小的 1 倍半。

【讨论】：

【解决方案2】：

如果根据vh设置字段高度，需要同样设置字体大小。字体大小是高度，而不是宽度。如果您设置宽度，则根据表单字段的宽度，您的文本对于框来说要么太高要么太短。我不确定当文本的形状与表单域的几何形状不匹配时，您希望表单域的外观如何。

我知道这不是真正的答案，但是您描述的问题没有解决方案。对于有助于您的更改，您可以参考另一个答案，但我不想只说“改为执行此操作”，因为有很多选项取决于您想要什么。

【讨论】：