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>

当我缩小浏览器的尺寸时，#header and #bakeryinro的尺寸会缩小，但#bakeryintro中的字体大小仍保持不变，请告诉我这个问题？

Answer 1

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

因此，当窗口大小发生变化时，没有理由改变字体大小。

如果您确实需要它，可以使用javascript更改字体大小：

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

Answer 2

你在谈论这个prototype吗？

如果你是，这只是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的非整数值，这就是为什么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; }
}

当我们减少浏览器窗口大小时，Css字体大小％不减少

2 个答案: