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ブラウザーは 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 に答える