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

Question

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;
}

<input class="pickthetime" type="time" id="pickthetime" name="pickthetime" required />

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

我也试过使用FitText，但还是出现了同样的问题。它在 Chrome（使用设备工具栏）或我的 Android phone.

上的缩放确实更好一些

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

Answer 1

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

这就是您遇到 mobile/desktop 缩放问题的原因：因为视口的比例 width/height 因设备而异。

使用例如 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.5 倍.

Answer 2

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

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

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

How do I scale the time font size based on the size of the time picker?

html

javascript

css

jquery

responsive-design