意外と知られていない 7 つの CSS 単位_html/css_WEB-ITnose-htmlチュートリアル-php.cn

意外と知られていない 7 つの CSS 単位_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:54:13

オリジナル

1683 人が閲覧しました

フロントエンド開発エンジニアの場合、一般的に px と em がより頻繁に使用されます。しかし、今日の記事の焦点は、私たちがめったに使用したり、聞いたりすることさえないいくつかの単位を紹介することです。

1. もう一度見てください

<style type="text/css">	body {font-size: 12px;}	div  {font-size: 1.5em;}</style><body>	<div>		Test-01 (12px * 1.5 = 18px)		<div>			Test-02 (18px * 1.5 = 27px)			<div>				Test-03 (27px * 1.5 = 41px)			</div>		</div>	</div></body>

ログイン後にコピー

font-size は継承されるため、階層が深くなるほどフォントが大きくなります。

2. rem

上記の em の使用法は開発で使用される可能性がありますが、拡張するためのベースラインが必要になる場合があります。この必要がある場合は、rem 単位を使用できます。rem の「r」は「ルート」を表します。これは、ほとんどの場合、現在の要素のフォントサイズを html 要素に設定することを意味します。。

<style type="text/css">	html {font-size: 12px;}	div  {font-size: 1.5rem;}</style><body>	<div>		Test-01 (12px * 1.5 = 18px)		<div>			Test-02 (12px * 1.5 = 18px)			<div>				Test-03 (12px * 1.5 = 18px)			</div>		</div>	</div></body>

ログイン後にコピー

もちろん、rem ユニットはフォントに適用されるだけでなく、CSS グリッドシステムに実装することもできます。

3 つ、vh と vw

レスポンシブレイアウトを行う場合、レイアウトにパーセンテージを使用することがよくありますが、CSS のパーセンテージは常にすべての問題に対する最適な解決策であるとは限りません。要素。親要素の幅と高さの代わりにビューポートの幅と高さを使用したい場合は、vh および vw 単位を使用できます。 1vh = viewportHeight * 1/100; 1vw = viewportWidth * 1/100; vh と vw を使用すると、要素の幅と高さをさまざまなデバイスに適応させることができます。

4. vmin と vmax

vw と vh はビューポートの幅と高さに対応し、vmin と vmax はそれぞれ幅と高さの最小値と最大値に対応します。たとえば、ブラウザの幅/高さの場合です。が 1000px /600px に設定されている場合、

1vmin = 600 * 1/100;

1vmax = 1000 * 1/100;

いくつかの例を見てみましょう:

4.1 正方形のコンポーネントは常にエッジに接触します。少なくとも 2 つの画面

<style type="text/css">.box {	height: 100vmin;	width : 100vmin;}</style><body>	<div class="box" style="background-color: #f00">		fdasjfdlas	</div></body>

ログイン後にコピー

4.2 全画面をカバー

<style type="text/css">	body {		margin: 0;		padding:0;	}	.box {		/*宽屏显示器width > height*/		height: 100vmin;		width : 100vmax;	}</style><div class="box" style="background-color: #f00">	fdasjfdlas</div>

ログイン後にコピー

5. ex と ch

ex と ch の単位は、すべてフォントサイズに依存するという点で em と rem に似ていますが、ex と ch もフォントに依存します。 -family、フォント固有に基づいて計算されます。 w3C 仕様の引用:

ex 単位最初に使用可能なフォントの使用される x-height に等しい [CSS3-FONTS] x-height は、多くの場合、小文字の「x」の高さに等しいため、そう呼ばれます。ただし、「x」を含まないフォントに対しても「ex」が定義されます。信頼できるフォントメトリックがあれば、フォントの x 高さはさまざまな方法で見つけることができます。利用できない場合、UA は小文字のグリフの高さから x 高さを決定する可能性があります。ヒューリスティックの 1 つは、小文字の「o」のグリフがベースラインからどのくらい下に伸びているかを確認し、その境界の上部からその値を減算することです。 x の高さを決定することが不可能または非現実的な場合は、「0」(ZERO、U+0030) グリフの使用される事前測定に等しい 0.5em の値を想定する必要があります。これら 2 つの単位の意味を説明するには、次の 2 つの単位を使用します。

これら 2 つの単位には多くの用途があり、そのほとんどは印刷時の微調整に使用されます。たとえば、sup 要素と sub 要素にはそれぞれ上付き文字と下付き文字が表示されますが、position とbottom を使用して以下をシミュレートできます:

<style type="text/css">body {	margin: 0;	padding:0;}.sup {	position: relative;	bottom: 1ex;}.sub {	position: relative;	bottom: -1ex;}</style><div>	AaB<span class="sup">b</span>CcXxD<span class="sub">d</span>EeFf</div>

ログイン後にコピー

6. 参考リンク

CSS Values and Units Module Level 3

CSS の値は何ですか'ex ' ユニット?

'ch' の定義

CSS3 ユニットとその用途の概要(サポート)

あなたが知らないかもしれない 7 つの CSS ユニット

再版ステートメント: