当我们减小浏览器窗口大小时，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 and #bakeryinro的大小会减小，但#bakeryintro中的字体大小保持不变，请告诉我问题所在？

Answer 1

css 属性"font-size"以百分比表示字体相对于标准字体大小的大小，而不是相对于屏幕的大小。

因此，当窗口大小更改时，字体没有理由更改大小。

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

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

Answer 2

你说的是这个原型吗？

如果你是，这是CSS唯一的原型证明：

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

更新：在评论中@dystroy问我的方法是否流畅，是否有必要编写1200条规则，以提供模拟javascript的方式，但是我想了数千条规则，并发现另一种方法是为每个整数值编写少量规则的字体大小。该方法有权存在，因为浏览器对属性 font-size 的非整数值支持不佳，这就是为什么将字体从 12 更改为 16 的 1200 条规则不是必需的，因为浏览器只能实现 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; }
}