CODEWITHSUNDEEP
htmlcss
Gaurav
Gaurav

Reputation: 8487

Css font-size in % not reducing when we reduce the browser window size

CSS

#header
{
    width:90%;    
}

#bakeryintro
{
    width:40%;    
}

.bakeryintro1
{    
    font-size:350%;        
}

.bakeryintro2
{ 
    font-size:200%;
}

Makup

<div id="header">
        <div id="bakeryintro" class="editable draggable resizable text header">
            <span class="bakeryintro1">The Bakery</span><br />
            <span class="bakeryintro2">it`s all aboout the bread.</span>
        </div>
</div>

When i will reduce the size of browser the size of #header and #bakeryinro will reduced but the font-size in #bakeryintro remains as it is, Pls tell me the problem?

Upvotes: 1

Views: 10886

Answers (2)

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

are you talking about this prototype ?

if you are, this is css only prototype-proof:

html { font-size: 62.5%; }
body { font-size: 1em;}

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

Update: In comments @dystroy asked about smoothness of my method and neccessity to write 1200 rules for provide to simulate javascript way, but I thought about the thousands of rules, and found another way is to write a small number of rules for each integer value of the font size. The method has a right to exist, because browsers poorly supporting non-integer values ​​for the property font-size, that's why the 1200 rules for changing the font from 12 to 16 are not neccessable, because browser can realize only 5 (12, 13, 14, 15, 16):

/* for smoothness on the edges of the rules
   when font-size is changing */
.example { transition: all 0.3s ease-out;  }

@media (min-width: 1000px) {
    .example { font-size: 12px; }
}

@media (min-width: 1100px) {
    .example { font-size: 13px; }
}

@media (min-width: 1200px) {
    .example { font-size: 14px; }
}

@media (min-width: 1300px) {
    .example { font-size: 15px; }
}

@media (min-width: 1400px) {
    .example { font-size: 16px; }
}

Upvotes: 4

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

The css attribute "font-size" in percent gives the size of your font relatively to the standard font size, not relatively to your screen.

So there is no reason for the font to change size when the window size changes.

If you really need it, you can use javascript to change your font size :

$('.bakeryintro1').css('font-size', ($(window).width()*0.01)+'px');

Upvotes: 8

Related Questions