html - CSS 在元素大小调整时增加字体大小

Question

在调整浏览器大小时，我的输入会增加并减少。如何改变相同的字体大小？不用js也可以吗？ font-size 应为 100% 输入高度。

http://jsfiddle.net/krLf0cbc/7/

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

Answer 1

您正在寻找视口(viewport)长度 - 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;
   }