CSS3フォントサイズレムプロパティの使用

 

PXユニット

初期の生産のWebページ、彼は非常に正確で固定されているので、私たちは、私たちのテキストを設定するには、「PX」を使用しています。

限りPXフォントサイズ設けられた素子のページとして、その子/子孫要素がフォントサイズを設定する、または設定されていないフォントサイズCSSの優先順位は、親要素が高いとされていない、サブエレメント/子孫要素は、親要素のPXフォントサイズ設定を継承します。

問題な方法があります。ユーザーは、我々は、ブラウザで作成したWebページを閲覧するとき、彼はブラウザのフォントサイズを変更し、その後、弊社Webページのレイアウトが壊れて使用します。

だから、彼らのウェブサイトのフロントエンド・ユーザー・読みやすさとユーザーエクスペリエンスを気にされる方のために、それは大きな問題です。

したがって、ときは、Webページのフォントを定義するには、「EM」を使用することが提案されています。

 

em単位

親要素にEM(要素のフォントサイズ)の相対的なフォントサイズの単位を指します。それらの間に実際には、非常に似ているが、ルールは、計算のルート要素は親要素の計算に依存しているに依存しています。

「PX」は、ズームインまたはブラウザでページをズームし、この問題を解決するために、我々は「EM」のユニットを使用することができますときにページのレイアウトが壊れます使用してください。

ユニットとして「EM」を使用する場合、必ずしも知っている必要があり、親要素のフォントサイズが「EM」は相対値であるため、設けられているが、親要素の相対的なフォントサイズの値は、(倍率/比をスケーリング)、リアルタイム式は次のとおりです。

例は:親要素は16pxに、1.4emの子要素は、実際のフォントサイズ16pxに* 1.4 = 22.4pxのサブ要素に設定されています。

その親要素の値を知る必要があるどのくらいの価値を決定するために、「1.4em」は「14px」であってもよいし、「20ピクセル」、というか「24ピクセル」することができ、簡単に言えば、不確実な値です!

 

REMと単位

 

REM(ルート要素のフォントサイズ)がルート要素の相対単位のフォントサイズを指します。これは、比較的単純な単位です。私はレムem単位を見て覚えているだろう、

 

上記の説明から、設定がピクセル内の子要素に影響を与える/子孫要素は、フォントサイズ、および親要素のフォントに応じて決定も提供em単位を表示します。この時間は、親要素のフォントサイズが非常に重要になります!

REMは、我々は唯一のルート要素への参照の値を決定する必要があることを意味ので、他の要素が基準値フォントサイズのスケーリングとしてREMサイズフォントサイズのHTMLに設定され、ページのルート要素<HTML>に対するものです図5を参照標準のフォントサイズ値:

簡単なコード例を見てみましょう:

HTML {フォントサイズ:62.5%; / * 10÷16×100%= 62.5%* /}
本体{フォントサイズ:1.4rem; / * 1.4×10pxの14px = * /}
H1 {フォントサイズ:2.4rem ; / * 2.4×10pxの= 24ピクセル* /}

私は、ルート要素<午前HTMLの基本的なフォントサイズがある中で定義> 62.5% つまり、計算を容易にするために、主にこの値を設定10pxのです。それ1.2remの12ピクセル、設定されていない、それはベースとなる場合に16pxさ1.6rem ブラウザのデフォルト"16pxに"基礎)。

レムプロパティブラウザの互換性

CSS3のレムは新しいの導入に測定単位で、またはのような多くのサポートされているブラウザ、見つける:Mozilla Firefoxの3.6 +、5 +アップルのSafari、Google Chromeの、IE9 +とOpera11 +を。

 

例えば、携帯電話のブラウザを設定することは、次に設定、親要素のフォント画素計6Pxを示します 

HTML {フォントサイズ:37.5%; / * 6÷16×100%= 37.5%* /}
本体{フォントサイズ:1.4rem; / * 1.4×計6Px = 8.4px * /}
H1 {フォントサイズ:2.4 REM; / * 2.4×計6Px = 14.4px * /}

 

参考:

http://www.phpvar.com/archives/2752.html

https://cloud.tencent.com/developer/information/%E7%A7%BB%E5%8A%A8%E7%AB%AFrem%E9%80%82%E9%85%8D

https://zhidao.baidu.com/question/553998626685304812.html

https://www.cnblogs.com/wxcbg/p/5908967.html

 

 

 

 

 

 

おすすめ

転載: www.cnblogs.com/sea-stream/p/11204579.html