em
と混ぜるべきですpx
か?
Asem
はフォント サイズにpx
基づいており、画面に基づいています。
ですから、ほとんどの Web サイトが を使用しているときに画像を生成するにはどうすればよいのem
でしょうか?
em
と混ぜるべきですpx
か?
Asem
はフォント サイズにpx
基づいており、画面に基づいています。
ですから、ほとんどの Web サイトが を使用しているときに画像を生成するにはどうすればよいのem
でしょうか?
通常、画像にはピクセル単位の固有の寸法があります。ただし、テキストのサイズと一致する必要があるボタンなどの場合は、フォント サイズに応じてサイズを変更できます。十分な大きさの画像を作成し (拡大するよりも縮小する方がはるかに効果的です)、たとえば画像の高さを に設定し1.5em
ます。高さのみを設定して幅を設定しない場合 (またはその逆)、ブラウザは幅と高さの比率が維持されるように画像をスケーリングします。
ただし、ボタンは画像ではなく CSS を使用して作成することをお勧めします。背景画像は、高度な CSS 機能 ( ) を使用して拡大縮小できますがbackground-size
、ブラウザのサポートは限られています。
1em は現在のフォント サイズと同じです。2em は、現在のフォントのサイズの 2 倍を意味します。たとえば、要素が 12 pt のフォントで表示される場合、「2em」は 24 pt です。「em」は、読者が使用するフォントに自動的に適応できるため、CSS の非常に便利な単位です。
「em」単位は、それが使用されている要素の「font-size」プロパティの計算値と同じです。例外は、'font-size' プロパティ自体の値に 'em' が含まれている場合です。この場合、親要素のフォント サイズを参照します。垂直または水平の測定に使用できます
ピクセル (コンピューター画面上のドット)、px は IE でもサイズ変更できます。em は、親要素によって継承されたサイズに対する相対サイズであり、実際には % と同じ意味を持ちます。
フォントは、さまざまなサイズで使用できるように設計されています。したがって、フォントエンジンは、正確にスケールアップ/スケールダウンするのに問題はありません。ただし、画像は常に厳密な測定を使用しています(単位に関係なく)。その結果、それらのサイズを変更すると、それらが大きくなる傾向があります。これは、ブラウザがサイズ変更を行っている場合に特に当てはまります。ブラウザは写真編集ツールとして設計されていません。
画像ベースのメニューを作成していて、メニューのサイズを拡大できるようにしている場合は、再設計が必要な場合があります。再設計ではない場合、おそらく1つの要素(スケーリングなし、または画像なし)を排除するよりも。
フォントに関しては、html、body、および em で px を使用するのが常に最善だと思います。ただし、相対単位 (vw vh v-min v-max) を見てください: http://css-tricks.com/viewport-sized-typography/
私は個人的に両方を混ぜます。エラーなしでどちらの方法でも実行できます。
それは好みと習慣に依存します。他にもあります:
http://www.w3schools.com/cssref/css_units.asp
混ぜることはできますが、お勧めしません。親が em を使用している場合は、コンテナー要素を作成し、その要素で px を使用します。
css3 を使用する
background-size: auto 100%;
コンテンツのコンテナに。どのように設定されていても、背景はコンテナーの高さに応じてサイズ変更され、コンテナーの高さは font-size に応じて増加します。