1

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保持不变，请告诉我问题所在？

4

2 回答 2

8

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

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

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

$('.bakeryintro1').css('font-size', ($(window).width()*0.01)+'px');
于 2012-05-12T07:00:48.890 回答
4

你说的是这个原型吗？

如果你是，这只是 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 在评论中询问了我的方法的平滑性以及为提供模拟 javascript 方式编写 1200 条规则的必要性，但我考虑了数千条规则，发现另一种方法是为每个整数值编写少量规则的字体大小。该方法有存在的权利，因为浏览器对属性的非整数值支持很差font-size，所以1200条将字体从12改为16的规则是不必要的，因为浏览器只能实现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; }
}
于 2012-05-12T07:13:22.433 回答