axl*_*lpl 2 html css font-size fluid-layout
在重新调整浏览器大小时,我的输入会增加和减少。如何更改相同的字体大小?没有js可以吗?font-size 应该是 100% 输入高度。
http://jsfiddle.net/krLf0cbc/7/
<div class="container">
<div class="inner">
<input class="input"/>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
和CSS
.container {
width: 100%;
}
.inner {
position: relative;
}
.input
{
position: absolute;
padding-bottom: 10%;
width:100%;
}
Run Code Online (Sandbox Code Playgroud)
您正在寻找视口长度 - vw、vh
所以改为
p{
font-size:4vw;
}
Run Code Online (Sandbox Code Playgroud)
它会随着宽度而变化,同样适用
p{
font-size: 4vh;
}
Run Code Online (Sandbox Code Playgroud)
http://dev.w3.org/csswg/css-values/#viewport-relative-lengths
不过为了安全起见,我仍然会包含一个后备
p{
font-size: 14px;
font-size: 4vw;
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
4784 次 |
| 最近记录: |