html - 当我们减小浏览器窗口大小时，CSS 字体大小百分比不会减小

Question

CSS

#header
{
    width:90%;    
}

#bakeryintro
{
    width:40%;    
}

.bakeryintro1
{    
    font-size:350%;        
}

.bakeryintro2
{ 
    font-size:200%;
}

化妆

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

当我减小浏览器的大小时，#header 和#bakeryinro 的大小将减小，但 #bakeryintro 中的字体大小保持不变，请告诉我的问题？

Answer 1

css 属性“font-size”(以百分比表示)给出了相对于标准字体大小的字体大小，而不是相对于屏幕的大小。

所以当窗口大小改变时，字体没有理由改变大小。

如果你真的需要它，你可以使用javascript来改变你的字体大小:

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