CSSウィザード単位：クイックスタート。 CSSのEM測定単位電力

CSS3は、VH、VW、VMIN、VMAXなどの新しい相対測定単位を追加しました。これらのユニットはブラウザウィンドウのサイズを基準にして計算されます。にとってデスクトップコンピュータブラウザウィンドウの幅は表示領域の幅よりも大きい（スクロールバー幅が追加されています）ので、要素に幅100VWを設定すると、HTMLを超えていきます。

図。 1. 100VW幅の全画面背景画像

サポートブラウザ

IE： 9.0 VMAXに加えて、VMINの代わりにVMを使用してください。
縁： 12.0 VMAXに加えて、VMINの代わりにVMを使用してください。
Firefox： 19.0
クロム： 26.0
オペラ： 15.0
サファリ： 6.1
iOSサファリ： 8.0
アンドロイド： 4.4
クロム。アンドロイド用: 55.0

1.単位VHとVW

木レスポンシブウェブデザイン目的の使用に基づいています。しかし、興味は、最も近い親要素のサイズに対して計算されているので、それぞれの場合については、より良い解決策からはるかに大きい。したがって、ブラウザウィンドウの高さと幅を使用する場合は、VHとVWの単位を使用することをお勧めします。たとえば、ブラウザウィンドウの高さが900pxの場合、1VHは9pxになります。同様に、ブラウザウィンドウの幅が1600pxの場合、1VWは16pxに等しくなります。

1.1。適応的な全画面の背景画像

視聴領域のより幅100VWを使用して指定された要素の幅なので、フルスクリーンの背景画像を作成するためには、HTMLルート要素の幅に等しくなる100％の幅を使用することをお勧めします。

FullScreen-BG（image.jpg）。背景位置：中央;背景サイズ：カバー;幅：100％;）高さ：100VH;）図。適応的に全画面の背景画像

1.2。フルページスライドの効果

ブラウザウィンドウの全体をブロックするには、高さ：100％を設定する必要があります。 3つの要素の場合 - HTML、Body、およびブロック自体のための直接：

HTML、ボディ（高さ：100％;）セクション（高さ：100％）

パーセンテージサイズは、親要素の値に対して計算されているので、各DOM要素に対して対応する値を確立する必要があります。 VH測定ユニットは、その値がブラウザウィンドウに対して直接計算されるため、チェーン上の値のインストールを必要としません。

セクション（高さ：100VH;）

矢印をクリックするとスライドを登る効果は、小さなjQueryスクリプトを使用して実装されています。

jQuery（Document）。（関数（$）（ "NAV"）。ON（ "click"、function（）（$（$（この）.HASClass（ "downpos \u003d $（ウィンドウ））。 ScrollTop（）+ $（ウィンドウ）.height（）。）（$（）.hasclass（ "top"））の場合（var movepos \u003d $（ウィンドウ）.scrolltop（） - $（window）.height（）; ）$（「HTML、BODY」）。Animate（（Scrolltop：Movepos）、600）;）;）;）

VHで指定された高さは、ページの中央の要素を揃えるためにも使用できます。

2011年6月16日に10:49

レイアウト時にどの単位の測定単位を選択します

私の過去では、私はこのトピックの紛争と議論の中で、測定単位とコメントの中で直ちに影響を受けましたので、私はこの問題を別の投稿にすることにしました。今議論:)

長さの単位は2つのカテゴリです。 絶対のそして 相対的。に 絶対の 挙関係：

インチ（イン）
サンテメーター（cm）
ミリメートル（mm）
ポイント（PT）
ピーク（PC）

CSS 1pt \u003d 1 / 72in仕様の観点から、1pc \u003d 12pt。
フォントサイズプロパティでは、長さ単位の負の値のタスク、例えば-25cm、 受け入れられない.
なぜ絶対的？彼らは物理的な世界にあるので実際の価値、つまり標準.
このような単位では、出力装置は実際の物理的なサイズを持っています。印刷時は、そのような単位を使用します。
しかし、モニターの場合、これらのユニットは意味がありません、 条件がいくつかありますしかしそれは有効です 従来の.
に 相対的単位は以下のとおりです。

eM（ラダー）
x-height（EX）
pX（ピクセル）

興味（％）は常にそれが別々に言う価値がある大きさです。 W3Cが別の列にそれを作ったことは非常に重要です。 IEはすべてのルールから書くことはできませんが、何人か、そして私たちが考慮されたものを理解しなければならないものをすべて書く必要があります。
ピクセルは、コンピュータ画面に取り付けることができる最小の点です。
なぜピクセル 相対的大きさ？私たちは取る 身体的 対角線があるモニター物理量。しかし、私たちはそれに許可を与えることができます 誰でも、正しい？米国で設定された許可に応じて、ピクセル値は異なる場合があります。。それがピクセル - 相対的値。つまり異なるPXモニタでは異なるサイズがあります。
ユニットEMは、グローバルブラウザパラメータにインストールされている標準フォントのサイズを指す。

個々の重要なフォントサイズのテーブル指定について。それらのほとんどは私たちには役に立ちませんが、知っておく必要があります。
4番では、フォント素子の基本線が表示され、13 - フォントサイズEM。そのため、EMは高さによって決まりますフォントサイズです大文字そして上下のリモート要素のサイズ（Diacriticalitical Signalは上部に表示されることがあります） e. または j).
そして元とは何ですか？これは小文字の高さです。テーブル内の3番3の下に書かれています。異なるフォントの場合、この比率は異なる量です。しかし、すべてのブラウザがそのような比率をサポートしているわけではありません。
例：Microsoftは、すべての種類のフォントで1EM \u003d 2EXの読み取りを推奨しました。それはEXの事実のためです別のブラウザ彼の仕事では異なるかもしれません 使ってはいけません。いくつかのブラウザは本当にEXを正しく考え、すなわちEMの半分と見なしています。そして実際には、それは0.46であり得、そのような不適合は知覚できなくなり、大きな違いがあるであろう。
PT、PC、サイトの使用について。
PTのサイト上の要素を指摘すると、それはまだ何かから取られます。だからブラウザはこの問題を解決する方法は？
開発の夜明けにコンピューター機器モニターの寸法は小さい範囲でした。そしてマイクロソフトは明確さのために96px \u003d 1inを取ることを提案し、私達は私達の装置の解決を築くでしょう。
1in \u003d 96px
そしてAppleはNo :)印刷に焦点を当ててみましょう：
1in \u003d 72pt
しかし実際には次のことがわかりました：許可が小さいほど、情報を配置する機会が少なくなります。
だからリンゴは彼の心を変えて1in \u003d 96pxを作ったが、それはすべて完全です n nあなたの機器の実際の物理的解像度は約60から600px / inの範囲です。
しかし、まだ値96は再計算することを決定しています。つまり、10ptのサイズを作成すると、ブラウザは次のようになります.96/72 * 10. PXでPTを再計算するときのストーリーです。
実際には、I。 私は助言しません モニターの使用について 絶対の 単位。モニターでは関係ありませんが、印刷するときは望ましいです。印刷するときは、すべてがPTで表示されていることを注意する必要があります。

CSS測定ユニットは、さまざまなプロパティの値を示すために使用されます。それらは絶対的で親戚に分けられます。

絶対単位

絶対測定単位には、センチメートル（CM）、ミリメートル（mm）、インチ（IN）があります。 Webページ上の要素の同じ表示を目的としているという事実にもかかわらず、ブラウザは常にディスプレイまたはモニタの物理サイズを計算することはできません。別の機器要素には異なるサイズがあります。

1 cm（フォントサイズ：1cm;）.ONE-MM（フォントサイズ：1mm;）.ONE-IN（フォントサイズ：1）

通常、これらの測定単位は、ページ印刷を出力するサイズを指定するときに使用されます。

活版印刷ユニット

活版印刷測定ユニットには、ポイント（PT）とピーク（PC）が含まれます。 POINT（1PT）は1/72インチの固定サイズを持ち、ピーク（1pc）は1/6インチ（1pc \u003d 12pt）です。これら2つの測定単位は、印刷されたバージョンの文書用に書かれたスタイルで最も便利です。

1点（フォントサイズ：1pt;）.ONE-PICA（フォントサイズ：1ピー;）

相対的な単位

測定の相対的な単位には、ピクセル（PX）と関数（％）があります。パーセンテージは、要素内のフォントサイズまたは要素自体のサイズに対する態度を持たない測定単位です。パーセントとして設定されたプロパティの値は、親要素の同じプロパティセットの大きさに直接依存します。たとえば、フォントサイズは、親要素のフォントのサイズを基準にして設定されます。また、高さと幅は、親要素のコンテンツの高さと幅に対するパーセンテージとして表されます。

1ピクセル（フォントサイズ：1ピクセル;）.ONEパーセント（フォントサイズ：1％）

画素 - 画面上の1つの物理ピクセルに等しい点。ただし、ブラウザは、視聴領域のサイズを必ずしも正確にピクセル単位で計算しません。

consider consider 最新モデル高解像度画面を搭載したラップトップ、タブレット、スマートフォン。このようなデバイスでは、ブラウザはPXユニットと画面上の物理ピクセル数と相関しません。その代わりに、視聴特性を96~120ピクセル/インチ程度のピクセル密度で伝統的なデスクトップモニタに表示するように、ユニットPXを正規化する。その結果、スマートフォン上のブラウザで10pxの四角形を描くことができるので、各辺では15~20物理画素となる。つまり、PXも相対測定単位であることがわかります。

フォント依存の相対単位

2つの追加の測定単位の測定単位がEMとEXです。 EMは現在のフォントの高さ、ex - 指定されたフォントの小文字のシンボル "x"の高さです。

ONE-EX（フォントサイズ：1ex;）.ONE-EM（フォントサイズ：1em;）

興味があるように、EMは一般的な測定単位であり、これはWebページ上のテキストのフォントサイズを設定するために一般的に使用されています。

CSS3では、2つの追加の測定単位が導入されました：REMとCH。 REM - ルート要素のフォントサイズ（）、現在の要素のフォントサイズに対する親または祖先のフォントサイズの影響を防ぐために、EMの代わりに使用することができます。

One-REM（フォントサイズ：1レム;）

CHユニットは、要素のフォントのシンボルゼロ（0）の幅に等しい。 1chは1文字にほぼ対応するため、その使用はテキストを含むフィールドの幅を決定するのに役立ちます。

00000

CHユニットはChrome 27+、Firefox 19+、IE9でのみサポートされています。 REMはChrome 4+、Firefox 3.6以降、IE9 +、Safari 4.1以降およびOpera 11.6以降でサポートされています。

ユニットビューエリア

視聴領域の測定単位は、VW（幅）およびVH（高さ）を含み、視聴領域、すなわちウェブページの目に見える部分を基準にすることを可能にする。

幅：50VW; 視聴領域の幅の50％* /高さ：25VH。視聴域の高さから/ * 25％* /

2つの追加のユニットはVMINとVMAXです。これは、視聴領域の最小または最大サイズを設定します。

幅：1Vmin。 * /高さ：1Vmaxという事実に応じて、/ * 1VHまたは1VW。 / * 1VHまたは1VW、さらに* /

測定単位相対視野は、Chrome 26+、Firefox 19+、IE11 +、Safari 6.1以降、Opera 15+でサポートされています。

単位値を測定します

値は整数として指定する必要はありませんが、小数点分割でも表示できます。一部のプロパティには、値として負の値を指定することもできます。

P（フォントサイズ：0.394;）/ * 10進数* / P（マージン：-1PX;）/ *負の値* /

測定単位の前にスペースユニットがある場合、または単位ユニットが指定されていない場合（ゼロ値を除く）の場合は、ADは機能しません。ゼロを値として使用すると、測定ユニットの表示を省略することができます。

P（フォントサイズ：1EX;）/ *正しく* / P（フォントサイズ：0;）/ *正しく* / P（フォントサイズ：0 EX;）/ *正しく* / P（フォントサイズ：1 EX ;）/ *誤って* / P（フォントサイズ：1;）/ *誤って* /

CSS ADにエラーが含まれているときはいつでも、ブラウザによって無視され、残りの発表は機能し続けます。

CSS3では、新しい測定単位が現れました。（私はすでにそれについて話しているようです。創立PX、PT、EM、およびNEWについては、すでに聞いたことがあります。もう少し検討しましょう.vwとvh。

レイアウトには、ブラウザのビジネスに収まることが保証されている要素があります。一般的な場合は、JavaScriptがこれに使用されます。エクスポートのサイズを確認し、それに応じて要素のサイズを変更します。ユーザーがブラウザウィンドウのサイズを変更した場合、手順は繰り返されます。

VW / VHを使用して、VIAPORTのサイズに対する要素のサイズを設定できます。 VW / VHユニットは、1VWが幅の1/100 "幅に等しい単位です。たとえば、幅の幅に等しいwidth要素を割り当てるには、幅を取り付ける必要があります：100VW。

どのように使用できますか

LikeBoxesはVWとVHを使用するための素晴らしい候補です。ただし、通常はビューポートに対して配置されているので、その位置：上、下、左右の値で固定されているのは、あなたが使うのが簡単です。高度と幅を取り付けることはできません。

通常の測定単位を使用して、通常のストリームにある要素のサイズを設定できます。たとえば、ページ上のスクリーンショットに対応できます。これらのスクリーンショットの高さはveeworの高さを超えてはいけません。これを行うには、最大画像の高さを設定できます。

IMG（最大高さ：95VH;）

この場合は、95VHの高さを設定して画面上にあるときに少しスペースを残します。

サポートブラウザ

REMがIE9を含むほとんどすべての主要ブラウザでサポートされている場合は、VWとVHを使用して待機します。現時点ではサポートされていますインターネットエクスプローラ。 9.

挨拶、親愛なるブログ読者ウェブコジウス！さまざまな要素のサイズを設定するには hTMLページCSSでは測定単位があります。さらに、両方の相対単位と絶対単位を使用することができます。

絶対単位 物理的な世界に関連付けられ、出力装置に依存しないでください。その説明については、次の単位を使用できます。

絶対単位は相対的に少なくとも使用され、主にテキストのサイズを設定するために適用されます。そしてテキストのサイズを示すために、それは主に1インチを72部することによって得られる（Pt）。インチは、それぞれ、それぞれ約25.4ミリメートルで、1つの段落はミリメートルの3分の1にほぼ同じです。絶対測定単位を使用する例：

絶対単位

サイズ12ミリメートル

サイズ1センチメートル

サイズ1インチ

サイズ24ポイント

ピックサイズ1

対策の相対単位

モニターの情報を表示するには、相対測定単位を使用することをお勧めします。モニタ上の画像を形成する点（ピクセル）の物理的なサイズは、このモニタ自体の種類や物理的なサイズによって異なる場合がある。また、画素サイズは、インストールされている画面の解像度によって異なります。主な相対単位：

CSSの1 PX私たちがすでに上で話されているように、それはユーザーの画面上のポイントです、その物理的な値はデバイスの解像度に依存し、その人がその表面を調べる期間に依存します。
パーセンテージを指定すると、親要素のサイズによってサイズが計算されます。したがって、たとえば、親要素の幅が500pxの場合、width：50％の要素幅は250pxになります。

em。 デフォルトのブラウザで指定されたフォントのサイズまたは親要素のフォントのサイズに接続されています。だが ex。 ラテンレイアウトのキャピタル（小）文字 "x"（x）の高さです。つまり、EMは、デフォルトのブラウザで指定されたフォントサイズまたは親要素のフォントサイズにも関連付けられています。例：

相対的な単位

サイズ20ピクセル

サイズ150％

サイズ2em。

サイズ2 ex。

結果：