|
多くの国内デザイナーはpxを使うのが好きですが、海外のウェブサイトではemやremを使うことが多いです。では、この3つの違いは何で、それぞれの利点と欠点は何があるのでしょうか? 詳しく紹介しましょう。 PXの特徴: 1. IEはpxを単位として使用するフォントサイズを調整できません。 2. ほとんどの海外のウェブサイトが調整可能な理由は、emやremをフォント単位として使っているからです。 3. Firefoxはpx、em、remを調整できますが、中国のネットユーザーの96%以上がIEブラウザ(またはカーネル)を使用しています。 PXピクセル。 相対長単位。 Pixel pxはモニターの画面解像度に相対的なものです。 (CSS2.0マニュアルより引用) EMは長さの相対単位です。 現在のオブジェクト内のテキストに対するフォントサイズ。 行内のテキストのフォントサイズが人工的に設定されていない場合、それはブラウザのデフォルトのフォントサイズに相対的に設定されます。 (CSS2.0マニュアルより引用) どのブラウザでもデフォルトのフォント高さは16pxです。 調整されていないすべてのブラウザは従順です:1em=16px。 すると12px=0.75em、10px=0.625emです。 フォントサイズ変換を簡単にするために、CSSのボディセレクターでfont-size=62.5%と宣言する必要があります。これによりem値は16px×62.5%=10pxになります。つまり、12px=1.2em、10px=1emとなります。つまり、元のpx値を10で割り、その単位をemに置き換えればよいということです。 EMの特徴: 1. emの値は固定されていません。 2. emは親要素のフォントサイズを継承します。 ですから、CSSを書く際には2つの点に注意する必要があります。 1. 本文セレクターでfont-size=62.5%を宣言する; 2. 元のpx値を10で割り、単位としてemに置き換える。 3. 拡大したフォントのem値を再計算します。 フォントサイズの繰り返し宣言は避けてください。 つまり、1.2 * 1.2 = 1.44の現象を避けるためです。 例えば、#content でフォントサイズを1.2emと宣言した場合、pのフォントサイズを宣言すると1emにしかならず、1.2emではありません。なぜならこのemはそのemではなく、フォント高さを継承するため1em=12pxになるからです #content。 REMの特徴 REMはCSS3に追加された新しい相位単位(根のem)で、多くの注目を集めています。 このユニットとEMの違いは何ですか? 違いは、REMで要素のフォントサイズを設定するときも相対的なサイズですが、相対的なサイズはHTMLの根元だけである点です。 このユニットは相対サイズと絶対サイズの利点を組み合わせたものと言えます。これにより、ルート要素のみを修正してすべてのフォントサイズを比例的に調整できるだけでなく、フォントサイズを層ごとに複合化する連鎖反応も回避できます。 現在、REMはIE8以前を除くすべてのブラウザでサポートされています。 サポートしていないブラウザの場合、対応も非常にシンプルで、絶対単位文を書くことです。 これらのブラウザはREMで設定したフォントサイズを無視します。 例を挙げます: p {font-size:14px; フォントサイズ:.875レム; } 手記：フォントユニットの選択は主にプロジェクト次第で、ユーザーが最新バージョンのブラウザを使っている場合はREMを推奨し、互換性が気になるならpxを使うか、または両方を使います。 こちらがpx、em、rem単位変換ツールのアドレスです:http://pxtoem.com/
| 
掲載地 2017/03/21 9:31:50
|
|
|
