离子输入框中的字母间距

【问题标题】：Letter Spacing in input box in ionic离子输入框中的字母间距
【发布时间】：2017-07-27 06:45:43
【问题描述】：

我想将输入框中的6个字母均匀分开如下

而不仅仅是打包在一起。

我假设只有 6 个字符会被输入。

我知道有一个属性letter-spacing 可以处理这个。

但是，由于 ionic 框架是响应式，输入框的宽度会有所不同。因此，我不能只将数字硬编码为字母间距。

有没有什么方法可以处理 html/css/ts 中的字母间距问题？

【问题讨论】：

您可以使用媒体查询为不同的屏幕指定不同的letter-spacing值或使用vh单位。

标签： css ionic-framework sass

【解决方案1】：

正如@Yug Kapoor 所说，您可以将letter-spacing 值与vw 单位一起使用

代码示例可以是这样的：

.div {
  width: 100%;
  text-align: center;
}

.input {
  width: 40%;
  letter-spacing: calc(6vw - 12px);
  padding-left: calc(6vw - 12px);
  text-align: center;
}

<div class="div">
  <input type="text" class="input" value="123456" />
</div>

而且，你可以看看这个链接；

http://caniuse.com/#feat=viewport-units

http://caniuse.com/#search=calc

viewport percentage

【讨论】：