CODEWITHSUNDEEP
htmlcssfont-sizefluid-layout
axlpl
axlpl

Reputation: 483

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? font-size should be 100% input height.

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

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

<input class="input"/>

</div>
</div>

and css

.container {
    width: 100%;
}

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

Upvotes: 2

Views: 7206

Answers (2)

Juanma
Juanma

Reputation: 26

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).

For example:

input {
    font-size: 1vw;
}

The only thing is that it's not fully supported yet: 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/

Upvotes: 0

ggilberth
ggilberth

Reputation: 1148

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

To be safe though, i'd still include a fallback 

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

Upvotes: 5

Related Questions