Question

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?

Answer 1

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