[英]CSS growing font-size on element resize
on re-size browser my input is growing and decreases. 在调整大小的浏览器上,我的输入正在增加和减少。 How to change same font size?
如何更改相同的字体大小? it is possible without js?
有可能没有js? font-size should be 100% input height.
字体大小应为100%输入高度。
http://jsfiddle.net/krLf0cbc/7/ http://jsfiddle.net/krLf0cbc/7/
<div class="container">
<div class="inner">
<input class="input"/>
</div>
</div>
and css 和CSS
.container {
width: 100%;
}
.inner {
position: relative;
}
.input
{
position: absolute;
padding-bottom: 10%;
width:100%;
}
You're looking for viewport lengths - vw, vh 您正在寻找视口长度-大众,大众
so change to 所以改为
p{
font-size:4vw;
}
and it will change with the width, same goes for 它会随着宽度而变化,对于
p{
font-size: 4vh;
}
http://dev.w3.org/csswg/css-values/#viewport-relative-lengths http://dev.w3.org/csswg/css-values/#viewport-relative-lengths
To be safe though, i'd still include a fallback 为了安全起见,我仍然会保留一个备用
p{
font-size: 14px;
font-size: 4vw;
}
You can use viewport units for resizing the text. 您可以使用视口单位调整文本的大小。
The values are: 'vw' (viewport width), 'vh' (viewport height), 'vmin' (the smaller of vw or vh), 'vmax' (the larger or vw or vh). 值是:“ vw”(视口宽度),“ vh”(视口高度),“ vmin”(vw或vh中的较小者),“ vmax”(较大或vw或vh)。
For example: 例如:
input {
font-size: 1vw;
}
The only thing is that it's not fully supported yet: http://caniuse.com/#feat=viewport-units 唯一的事情是尚未完全支持它: http : //caniuse.com/#feat=viewport-units
So maybe I would recommend to fallback to media queries: 因此,也许我建议您回退到媒体查询:
@media screen and (max-device-width : 320px)
{
input {
font:<size>px;
}
}
@media screen and (max-device-width : 1204px)
{
input {
font:<size>px;
}
}
Or a JS Plugin: http://fittextjs.com/ 或JS插件: http : //fittextjs.com/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.