CSS => 長さ単位

前書き

CSS距離測定は、直後に長さ単位（px、em、pc、in、...）が続く数字です。

CSSはいくつかの長さ測定単位をサポートしています。彼らは絶対的または相対的です。

構文

価値単位
1em

パラメーター

単位	説明
％	親オブジェクトまたはプロパティに依存する現在のオブジェクトに関してサイズを定義する
それら	要素のフォントサイズ（2emは現在のフォントのサイズの2倍を意味します）に比例して、
レム	ルート要素のfont-sizeに相対
VW	ビューポートの幅の1％に対して*
vh	ビューポートの高さの1％
vmin	ビューポートの*小さい方の寸法の1％
vmax	ビューポートの*大きい方の寸法の1％
CM	センチメートル
mm	ミリメートル
に	インチ（1インチ= 96ピクセル= 2.54cm）
px	ピクセル（1ピクセル= 1/96の1インチ）
pt	ポイント（1pt = 1/72 = 1in）
pc	ピカ（1点= 12点）
s	秒（アニメーションとトランジションに使用）
ミズ	ミリ秒（アニメーションとトランジションに使用）
元	現在のフォントのx-高さに比例
ch	ゼロ（0）文字の幅に基づいて
fr	小数点ユニット（CSSグリッドレイアウトで使用）

備考

番号とユニットの間に空白を入れることはできません。ただし、値が0の場合は省略することができます。
一部のCSSプロパティでは、負の長さを使用できます。

remのフォントサイズ

CSS3では、「root em」を表すremユニットを含むいくつかの新しいユニットが導入されています。 remどのように働くか見てみましょう。

まず、 emとrem違いを見てみましょう。

em ：親のフォントサイズに比例します。これは複合問題を引き起こす
rem ：ルート要素または<html>要素のフォントサイズに<html>ます。これは、html要素のための単一のフォントサイズを宣言し、すべて定義することが可能です意味remその割合ように単位を。

フォントサイジングのためにremを使用する際の主な問題は、値が多少使いにくいことです。次の例は、基本単位のサイズが16pxであると仮定して、 rem単位で表される一般的なフォントサイズの例です。

10ピクセル= 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem（ベース）
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

コード：

html { 
  font-size: 16px; 
}

h1 { 
  font-size: 2rem;          /* 32px */
}

p { 
  font-size: 1rem;          /* 16px */ 
}

li { 
  font-size: 1.5em;         /* 24px */
}

remsとemを使ってスケーラブルな要素を作成する

あなたは使用することができremによって定義されfont-size 、あなたのhtml彼らの設定することで、スタイル要素にタグをfont-sizeの値にremと使用emグローバルに拡張要素を作成するために要素内font-size 。

HTML：

<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">

関連するCSS：

html {
  font-size: 16px;
}

input[type="button"] {
  font-size: 1rem;
  padding: 0.5em 2em;
}

input[type="range"] {
  font-size: 1rem;
  width: 10em;
}

input[type=text] {
  font-size: 1rem;
  padding: 0.5em;
}

考えられる結果：

vhおよびvw

CSS3は、サイズを表すために2つのユニットを導入しました。

viewport heightを表すvhは、 viewport height 1％に相対的です
viewport widthを表すvwは、 viewport width 1％に相対的です

div { 
  width: 20vw; 
  height: 20vh;
}

上記の場合、divのサイズはビューポートの幅と高さの20％を占めます

vminおよびvmax

vmin ：ビューポートのより小さい次元の1％に相対
vmax ：ビューポートの大きい方の寸法の1％に相対

換言すれば、1 vmin 1つのVHおよび1台のVWの小さい方に等しいです。

1 vmaxは1 vhと1 vwの大きい方に等しい

注： vmaxは以下でサポートされていません。

任意のバージョンのInternet Explorer
バージョン6.1より前のSafari

パーセント％

応答性のあるアプリケーションを作成する際に役立つユニットの1つ。

そのサイズは親コンテナによって異なります。

方程式：

（親コンテナの幅）*（パーセンテージ（％））=出力

例えば：

子供は 50％を有している親は 100pxに幅を有しています。

出力では、子の幅は50％の親の半分（50％）になります。

HTML

<div class="parent">
   PARENT
   <div class="child">
     CHILD
   </div>
</div>

CSS

<style>

*{
  color: #CCC;
}

.parent{
  background-color: blue;
  width: 100px;
}

.child{
  background-color: green;
  width: 50%;
}

</style>

出力

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

CSS
長さ単位

サーチ…

前書き

構文