2

ゼロパディング、絶対配置、事前定義された幅 (ピクセル単位)、およびプレーンテキストを内部に持つdiv要素があるとします。

次に、テキストの CSS font-size プロパティを 1 ピクセル増やします。レイアウトが同じままになるように、 divの幅をどのように拡大する必要がありますか (つまり、幅が不均衡に増加したために、ある行から別の行に単語がジャンプすることはありません)。

CSS の font-size をピクセル単位で設定できない場合は、ptまたはemで設定する必要がありますが、その理由は何ですか?

4

5 に答える 5

6

div の幅とフォント サイズの両方を ems で指定します。次の例では、フォント サイズをピクセル単位で変更すると、レイアウトを変更せずに div とテキストのサイズが比例して変更されます。

<html>
  <head>
    <title>Proportional Resize Example</title>
    <style>
      body {font-size:10px}
      div {
        position:absolute;
        top:100px;
        left:100px;
        width:20em;
        font-size:2em;
        padding:0;
        background:green}
    </style>
  <head>
<body>
  <div>
    This text will resize proportionally.
    This text will resize proportionally.
    This text will resize proportionally.
  </div>
</body>
</html>

この例では、body 要素のフォント サイズを変更すると、すべてが比例してサイズ変更されます。これは、div でサイズを指定するために使用した ems が、body 要素のフォント サイズを基準にして測定されるためです。body 要素のフォント サイズを大きくすると、div 内の em の幅とフォント サイズの両方が大きくなります。

于 2009-04-21T19:44:40.127 に答える
1

CSS や Web ベースのアプリでこのようなことが行われているのを見たことがありません。そうは言っても、フォント、 em または pt に適している 2 番目の質問に対する答えはemです。なんで?em はフォント サイズの測定に使用され、設計上比例しているためです。1em は、本文テキストのフォント サイズの 100% です。1.1em は 110%、0.8em は 80% などです。

于 2009-04-21T17:54:01.110 に答える
0

CSS自体は、divと同様に、非常に静的なものです。

ある要素のプロパティを他の要素のプロパティに依存させることはできません。単一の要素であっても、そのプロパティの一部を他のプロパティと同期させることはできません。

自動調整のいくつかの特性を示す唯一の組み込みソリューションはHTMLテーブルですが、おそらくそれを使用したくないでしょう。

このダイナミクスを追加する唯一の方法は、JavaScriptなどのスクリプト言語を使用することです。

于 2009-04-21T18:15:18.360 に答える
0

Scriptaculousには、これがビルトイン エフェクトとして用意されています。試してみる。

new Effect.Scale('id_of_element', percent, [options]);
于 2009-04-21T17:45:32.300 に答える
0

CLaRGeが言ったように、emは親要素のフォントサイズに基づく測定値であるため、フォントサイズに比例した要素のサイズが必要な場合に使用するのが自然な選択です. フォント サイズをピクセル単位で測定している場合、em はピクセル単位のフォント サイズです。たとえば、フォント サイズが 10px の場合、200px は 20em を意味します。

于 2009-04-21T17:56:56.203 に答える