CSS在元素调整大小时增加字体大小答案

【问题标题】：CSS growing font-size on element resizeCSS在元素调整大小时增加字体大小
【发布时间】：2014-11-14 01:30:15
【问题描述】：

在重新调整浏览器大小时，我的输入正在增加和减少。如何更改相同的字体大小？没有js可以吗？ font-size 应该是 100% 的输入高度。

<div class="container">
<div class="inner">

<input class="input"/>

</div>
</div>

和css

.container {
    width: 100%;
}

.inner {
    position: relative;
}
.input
{
    position: absolute;
    padding-bottom: 10%;
    width:100%;
}

【问题讨论】：

你可以在css中使用font-family选项来改变字体和font-size选项来改变字体大小...

标签： html css font-size fluid-layout

【解决方案1】：

您正在寻找视口长度 - vw, vh

所以改成

p{
   font-size:4vw;
}

它会随着宽度的变化而变化，同样适用

p{
   font-size: 4vh;
}

http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

但为了安全起见，我仍然会包含一个后备

 p{
    font-size: 14px;
    font-size: 4vw;
   }

【讨论】：

【解决方案2】：

您可以使用视口单位来调整文本大小。

值是：'vw'（视口宽度）、'vh'（视口高度）、'vmin'（vw 或 vh 中的较小者）、'vmax'（较大或 vw 或 vh）。

例如：

input {
    font-size: 1vw;
}

唯一的问题是它还没有完全支持：http://caniuse.com/#feat=viewport-units

所以也许我会建议回退到媒体查询：

@media screen and (max-device-width : 320px)
{
  input {
    font:<size>px;
  }
}
@media screen and (max-device-width : 1204px)
{
  input {
    font:<size>px;
  }
}

或 JS 插件：http://fittextjs.com/

【讨论】：

2021年统一支持vw和vh。