CSS ユニット コンバータ

CSS Unit Converter は、CSS がタイプとレイアウトのサイズ設定に使用する単位 (px、rem、em、pt、%) 間の長さを変換します。これは、最新のレスポンシブ デザインが相対的な単位 (ユーザーのフォント サイズ設定とズームを伴う rem および em スケール) に依存しているために存在します。一方、デザインのモックアップや古いスタイルシートは通常、固定ピクセルで表現されます。このツールは 24px のような値を取得し、一度に 1.5rem、1.5em、18pt、150% として表示し、単一のフィールドからあらゆる方向に動作します。

変換はすべて1 つの数字にヒンジされます: ルート (ベース) フォントサイズ、それがhtml要素のブラウザのデフォルトであるため、デフォルトは16pxです。 1つのremは常にそのベースフォントサイズに等しいので、16pxでは値16pxは1rem、24pxは1.5rem、8pxは0.5remです ポイントはCSS参照ピクセルに結び付けられます - 1インチは96pxと72ptです - したがって、1ptは96/72、約1.333pxに等しくなりますパーセントはベースフォントサイズのシェアとして扱われるため、100% はベースに等しく、50% はその半分に等しくなります。

変換には毎回2 つのステップがかかります ツールはまず1 つの入力単位のピクセル数を掛けて入力をピクセルに変え、次にそのピクセル値を1 つのターゲット単位のピクセル数で割ります 18pxの基数では27pxが27 × 18 = 1.5remになり、任意の基数では12ptが12 × 96 × 72 = 16pxになります 結果は最大でも小数点以下4 桁に丸められるので、16pxの基数では15pxは0.9375remを読みます vwやvhなどのビューポート単位はコンバータの一部ではありません、フォントサイズではなくウィンドウサイズに依存するため、0 以下の基数フォントサイズは16pxに戻ります。

入力するとすべてがブラウザーで実行されるため、アップロードもサーバーでの待機もありません。基本フォント サイズを変更して、独自のフォント サイズを設定するコンポーネントをモデル化し、すべてのユニットで結果を読み取り、必要なものをコピーします。内蔵の px-to-rem テーブルにより、タイプ スケールで最も多く表示されるサイズをすぐに参照できます。