CSS単位変換

rem はルート要素（html）のフォントサイズを基準にする単位で、どこで使っても同じ長さになります。em はその要素の親のフォントサイズを基準にするため、入れ子にすると効果が掛け算になります。親が 20px の中で 0.5em を指定すると 10px ですが、さらにその中で 0.5em を指定すると 5px になります。この累積が意図しないサイズになる原因で、レイアウトの寸法には rem を使うのが無難です。

CSSでは 1in = 96px と定義されています。ここから 1pt = 1/72in = 96/72 = 約1.3333px、1pc = 1/6in = 16px、1cm = 96/2.54 = 約37.795px、1mm はその1/10、1Q（四分archi）は 1cm の 1/40 になります。実際の印刷物の物理長と一致するとは限らず、画面上の換算はこの定義に従います。

この換算では % を親要素のフォントサイズ基準（font-size の % 指定）として扱っています。width の % は親の幅、line-height の数値なし % は自身のフォントサイズというように、% の基準はプロパティごとに異なります。使う場所を確かめてから換算してください。

ルート要素のフォントサイズが既定の16pxであれば、16px = 1rem です。ルートを 10px に変更している場合は 16px = 1.6rem になります。このツールでは「ルート要素のフォントサイズ」を変えると換算結果もその場で追従します。

余白や幅などレイアウトの寸法には rem が無難です。em は親のフォントサイズを基準にするため入れ子で効果が累積し、意図しないサイズになりやすいためです。逆に「そのテキストの大きさに比例させたい余白」のような用途では em が適しています。

CSSの定義では 1in = 96px、1pt = 1/72in なので、1pt = 96/72 = 約1.3333px です。逆に 1px = 0.75pt になります。この値はCSSの仕様で固定されており、ディスプレイの実解像度とは関係ありません。

いいえ。換算はすべてお使いのブラウザ内で計算します。入力内容がサーバーへ送信されることはありません。