ほとんどのデザインは、レイアウトの固定値（ブロックの幅と高さ、フォントサイズ）の使用に焦点を当てています。 これにより、表示スケールを変更するときにレイアウトが「バラバラにならない」ようになり、クロスブラウザプロパティが保持されます。 ただし、大きなマイナスが1つあります。画面解像度が大きいと、小さな固定ブロックが広い領域で失われ、気付かれずに消えてしまいます。 ここでは、「ゴム」レイアウトは保存されません。 たとえば、幅が1280を超える解像度の19インチモニターでは、サイトはさらに読みにくくなります。 私にとって、これは関連しています。 解像度1400x800の17インチラップトップでは、「ゴム」サイトの表示は非常に不便です。 そして、そのようなサイトに留まるという欲求はすぐに消えます。 テキストだけでなくサイト全体のスケールを制御する方法はありますか？

挑戦する

すぐに頭に浮かぶのは、ブラウザー設定のズームコントロールです。 幸いなことに、IE6とFireFox（驚くべきことに）を除いて、ほとんどの最新ブラウザーはこの機能をサポートしています。 IE6では、ピクセル単位ではなくフォントサイズを指定する必要がありますが、テキストのスケールのみを制御できます。 最大のフォントを選択すると、サイトが単純に「バラバラ」になり、完全に読めないように見えるという問題が発生します。



したがって、私たちのタスクは、テキストだけでなく、それを含むブロックにも弾力性を持たせることです。

実装

エラスティックテンプレートのレイアウト機能では、 すべての値 をピクセル（px）で指定するのではなく 、パーセンテージではなくem で指定する必要があります 。

パーセンテージの使用が非効率なのはなぜですか？ なぜなら、すべてのブラウザーで10分の1および100分の1の値の使用が受け入れられるわけではないためです。 em値では、小数点以下3桁を指定でき、各桁が考慮されます。



emを使用すると、任意の要素に弾力性を持たせ、テキストが特定のブロックの境界を超えて「離れる」ことができることを忘れることができます。 あなたの多くは、おそらくpxからemに切り替える方法に関する記事を読んだことがあるでしょう。 しかし、繰り返しても誰も傷つけないと思います:)



エラスティックテンプレートを作成するには、多くの計算、つまり通常のピクセルをemに変換する必要があることに注意してください。 したがって、電卓で武装する価値があります:)



デフォルトでは、1emはbody要素に指定したフォントサイズと同じです。 フォントサイズが指定されていない場合、ほとんどのブラウザは自動的にサイズを16pxに設定し、次に1em = 16pxに設定します。 ここから：

0.5em = 8ピクセル

10em = 160pxなど

多くの人がすでに知っているように、0.625em（62.5％）= 10pxです。 これは便利な出発点です。



ルールを書きます：

html{ font-size:100%; } /* IE*/

body{ background:#eee;

font-size: 0.625em;

font-family:Arial;

text-align:center}

これで、1emは10pxになります。

pxをemに変換する式は非常に簡単です：



ここで、Xは変換されるpxの値であり、Yはemの対応する値です。



なぜなら フォントだけでなくコンテンツ全体にも伸縮性を持たせたい場合は、メインの構造ブロックのフォントサイズの割り当てを放棄する必要があります。 その理由は、フォントサイズをブロックに割り当てた後、親の値のサイズ（10px）ではなく、このブロックのフォントサイズ（12px）からではなく、異なる式に従ってemで幅を再計算する必要があるためです。 したがって、ブロック内では、たとえばp要素を使用します。



これで、たとえば次のような構造を直接処理できます。

「弾性」レイアウトの例

Lorem ipsum dolor sit amet、consectetur adipisicing elit、sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua。 Ut enim ad minim veniam、quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat。 Duip aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Sint occaecat cupidatat non proident、culpa qui officiaのsuntを除きます。

Lorem ipsum dolor sit amet、consectetur adipisicing elit、sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua。 Ut enim ad minim veniam、quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat。 Duip aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Sint occaecat cupidatat non proident、culpa qui officiaのsuntを除きます。

要素H1、P、IMG、およびラップブロックのルールを書き留める必要があります。 後者の場合、幅を600pxに設定し、最初にemに変換します：

600px / 10 = 60em。

#wrap{

width: 60em;

margin: 1.5em auto; /* 15px/10 =1.5em*/

border: 0.1em solid #ccc; /* 1px/10 =0.1em*/

background: #fff;

text-align: left;

}

見出しには、16pxに相当するフォントサイズを割り当て、段落には12pxを割り当てます

h1{

font-size: 1.6em; /* 16px/10 =1.6em*/

margin: 0.833em; /* 10px/16 =0.833em*/

font-weight: 300;

}



p{

font-size: 1.2em;

line-height: 1.333em; /* 16px/12 =1.33em*/

margin-bottom: 1.25em; /* 15px/12 =1.25em*/

}

また、写真の寸法もemで指定する必要があることを忘れないでください。 ただし、変換式が非常に単純な場合、これは問題になりません。 img要素に次のルールを割り当てます。

img {

width: 8.333em; /* 100px/12 =8.33em 12 – p*/

height: 8.333em;

margin:0 0.833em 0.833em 0; /* 10px/12 =0.833em*/

}

例を見る

まとめ

この例は2つのブロックを示しています。 下の図は、pxでの通常のレイアウトの例です。 ただし、IEとFireFoxでのみ違いが表示されます。 Operaは、両方のタイプセットの例でズームを等しく表示します。



最大のフォントスケール





最小のフォントサイズ



ご覧のとおり、エラスティックレイアウトの利点は明らかです。 これで、テキストだけでなくブロック全体もスケーリングされるため、OperaおよびIE7のスケーリング関数に似たものが作成されました。 そのため、固定値に依存しない、サイトの完全に伸縮性のあるテンプレートを簡単に作成できます。 これにより、テキストだけでなく、IEおよびFireFoxのサイト全体のスケールを制御できます。



もちろん、すべての人が電卓のそばに座って計算に時間を費やすことを望んでいるわけではありません。 しかし、最初のタスクで必要な場合は、私の例が役に立つことを願っています。



ジョン・タン・ジェリン経由