01
文字サイズの基準を分ける
remはルート、emは親要素の文字サイズを使います。vwとvhはこのタブの現在幅ではなく、入力したビューポートの幅と高さを使います。
HTML / CSS / フロントエンド
CSS単位変換基準を決めてからレスポンシブ値へ
長さを入力するか、clamp・calc・縦横比のモードに切り替えます。
CSS単位変換
入力
値はこのブラウザー内で計算され、送信されません。
結果
px
24pxrem
1.5remem
1.5emvw
1.6667vwvh
2.6667vh設定
計算できました。
デザインカンプの24pxをremに直すとき、ルート文字サイズが16pxとは限りません。CSS単位変換ではrem用のルート、em用の親要素、vwとvh用の画面幅と高さを別々に設定できます。
px rem変換だけでなく、CSS clamp計算とvw vh計算も同じ画面で扱えます。CSS単位変換で使った基準は対応するcalc()式にも反映されるため、数字を見比べながら調整できます。
CSS単位変換を使う理由
相対単位の前提を結果とともに確認できます。
単位ごとの基準が混ざらない
CSS単位変換は同じ長さをpx・rem・em・vw・vhで表示します。ルートだけ変えるとremが変わり、親要素だけ変えるとemが変わります。対象サイトの計算済みスタイルを自動で読み取った値ではありません。
端点からclamp()を組み立てる
小さい画面と大きい画面それぞれの幅とサイズから中間のvw係数を計算します。768pxなどの幅を指定すると、線形区間内か上限・下限に達したかを数値で確認できます。
数字の前提を確認する三つの点
02
更新方法を選ぶ
自動計算は変更後350ms待ってから実行します。オフにするとCtrl/Cmd+Enterで実行でき、入力変更後の古い結果はコピーできません。
03
中間幅を試す
clampでは二つの端点だけでなく中間の画面幅も確認します。縦横比モードでは約分結果と、指定した幅に対応する高さを見比べます。
換算、流体式、比率を連続して調べる
五つの単位を一覧表示
px、rem、em、vw、vhのいずれかを入力すると、同じ長さの値をすべて表示します。単位のない数値はpxとして扱います。
clamp()式を生成
二つのビューポート幅とサイズから式を導き、remまたはpxの境界値を選べます。プレビュー幅での実寸も表示します。
対応範囲を明示したcalc評価
五つの長さ単位、括弧、基本演算をpxに評価します。長さ同士の足し引きと、無単位数による掛け算・割り算に限ります。
縦横比と高さを計算
整数の元画像サイズから比率を約分し、aspect-ratio宣言と目標幅に対応する高さを出します。
計算できる範囲と入力条件
- 相対単位は設定した基準だけを使う
- CSS単位変換は対象ページのDOMや実際の親要素を読みません。ルート、親、ビューポートの値が違えば結果も変わります。
- 任意のCSS式には対応しない
- calc()で扱うのは五つの長さ単位と基本演算だけです。%、var()、env()、不明な単位や長さと数値の不正な加算は拒否します。
- clampの順序を守る
- 最小ビューポート幅は最大幅より小さく、最小サイズは最大サイズ以下にします。負のサイズや無限大は結果にしません。
- 画像の加工は行わない
- 縦横比モードには正の整数の幅と高さが必要です。比率と目標高さを計算するだけで、画像を切り抜いたり変更したりしません。
CSS単位変換のよくある質問
pxをremに変換するには？
pxの値をルート文字サイズで割ります。ルートが16pxなら24pxは1.5remです。別の基準を使うサイトでは設定を合わせてください。
remとemの違いは何ですか？
remはルート要素、emは指定した親要素の文字サイズが基準です。入れ子の要素ではemだけ値が変わる場合があります。
vwとvhは何を基準に計算しますか？
1vwは画面幅の1%、1vhは画面高さの1%です。幅と高さを入力してからpx経由で換算します。
clamp()の中間値はどう計算しますか？
二つの画面幅とそのときのサイズを入力すると、中間の直線を求めてclamp()を生成できます。プレビューで途中の値も確認できます。
ルートのフォントサイズが16px以外でも使えますか？
使えます。rem出力は入力したルート文字サイズを使うため、16px以外ならその値を設定してからコピーしてください。
ほかに質問はありますか？