初めてデザイナーが私に "body テキスト 16px、見出し 28px、小さな印刷物 13px" と言った仕様を渡しました。フロントエンドのリードは " と言いましたが、すべてを rem で出荷します。 " 私は電卓アプリで手作業で分割しました。 16 オーバー 16 は 1、28 オーバー 16 は 1 ポイント 7 5、13 オーバー 16 は 0 ポイント 8 1 2 5 です。その後、基本フォント サイズが 10 ピクセルに変更され、"62.5%" 別のプロジェクトでセットアップされ、再びすべてを実行しました。 3 回目以降、Toolz.dev ワークフローに小さなコンバーターが組み込まれ、それ以来スタイルを整えたほぼすべてのコンポーネントの算術ミスから静かに救われました。
tl;dr: CSS単位変換器は、制御するルートフォントサイズ (デフォルトでは16px) に基づいて、1 単位の値 - px、rem、em、pt、または% - を1 つおきに等しい値に変えます。 pxをremに変換するには、ピクセルをルートフォントサイズで割ります:
24px ÷ 16 = 1.5rem.逆に行くには,乗算します:1.5rem × 16 = 24px。 ザ・ CSS ユニット コンバータ これはすべてのユニットに対して一度に即座に実行され、ブラウザー内で完全に実行され、コピーできる px-to-rem 参照テーブルが含まれています。
このガイドでは、ユニットがどのように関連しているか、基本フォント サイズがそれほど重要である理由、各ユニットにいつ到達するか、コンバーターが実行する正確な計算について説明します。私は WordPress テーマ、WP Adminify 管理者 UI、React ダッシュボードにわたる多くのインターフェイスをスタイル化しましたが、それらのすべてでユニットの質問が出てきます。すべてがかかっている単一の数字が表示されると、ルールは単純になります。
なぜpxからremへの変換が重要なのでしょうか?
ピクセルはほぼすべてのデザインツールがエクスポートする単位です。 figma、sketch、photoshop はすべてピクセル単位で考えるため、ハンドオフ仕様はピクセル値のリストです。 1 つの CSS ピクセルは固定参照サイズであり、ユーザーが何かを調整しても変化しないため、ピクセルについても簡単に推論できます。
その固定性は、アクセス可能で応答性の高いインターフェイスの問題そのものです。誰かがブラウザ& #39; のデフォルトのフォント サイズを増やすと - ロービジョンを持つ多くの人が依存する設定 - 固定ピクセル単位のテキスト サイズは変更を完全に無視します。 rem 単位のテキスト サイズもそれに合わせてスケーリングします。一部の古い構成やユーザー スタイルシートのブラウザ ズームにも同じことが当てはまります。タイポグラフィーが読者と #39; の設定を尊重したい場合は、相対的な単位でサイズを調整し、ページ全体で予測どおりに動作するのは rem です。
つまり一般的なワークフローは ピクセル単位でデザインし レム単位で出荷する ということです これで一日中分割作業ができます 分割は小さなエラーが忍び寄る場所です 書き込み 0.8125rem 代わりに 0.875rem for a 13px value is a kind of typo that shipped to production and makes one label look subtly wrong.コンバーターはそのリスクを取り除き、それが私が1 つを手の届くところに置いておく理由のすべてです。 これらのタスクの多くを横断して作業する場合は、より広いです Web 開発者ツールキット 単位変換が他の日常の仕事と重なる場所をカバーします。
px、rem、em、pt、% の違いは何ですか?
これらのユニットはすべて、レンダリング時に多数の CSS ピクセル、つまり関係に解決されます CSS 値と単位 レベル 4 ピンダウン: 参照ピクセルは、画面に対してではなく、96 dpi ディスプレイに対して定義されます。違いは、それらが何に対して測定されるかです。
px を はCSS参照ピクセル。 のフォントサイズに依存しないという意味で絶対単位である。 1px です 1px。これにより、予測可能になりますが、ユーザーの好みにも反応しなくなります。
レム 手段 " root em." 1 つのremはルート要素のフォントサイズに等しい - the html 要素。 デフォルトでは、それは 16px ですので、 1rem です 16px、 1.5rem です 24px、そして 0.5rem です 8px。 常にルートに結び付けられているため、rem 値は、要素がどれほど深くネストされていても、ドキュメント内のどこでも同じことを意味します。
エム のフォント サイズに比例します 現在の 要素。 element' s のフォントサイズが 20px の場合、 1em その中には20px、 1.5em は30pxで、 というように続きます。 catch is that em compounds: if a parent sets font-size: 1.2em そして子供もセットします 1.2em、child's の有効サイズは祖父母の 1.2 × 1.2 です。このツールはベースにあるサイズの要素を想定しているため、em と rem は同じものを読みます。そして、ベースのフォント サイズをその要素's サイズに設定することで、特定の em コンテキストをモデル化します。
pt を は点であり、印刷タイポグラフィから継承されている。 CSSでは1 インチが96 ピクセル、72 点と定義されているため、 1pt 96/72 ¤ 1.333px に相当します 1px 0.75ptに等しい。ポイントは印刷スタイルシートに属します;画面上では、それらは参照ピクセルの固定倍数にすぎません。
% フォント サイズの場合、親 (またはルートではベース) のパーセンテージです。 100% 参照サイズと等しくなります 50% の半分に相当します。 16pxの基底では、 100% は 16px および 150% は 24px.
デフォルトの16pxルートで共通の値がどのように並ぶかは次のとおりです:
| px を | レム | エム | pt を | % |
|---|---|---|---|---|
| 12です | 0.75 | 0.75 | 9です | 75 に所蔵されています |
| 14 に記載しております | 0.875 | 0.875 | 10.5 | 87.5 |
| 16か | 1です | 1です | 12です | 百 |
| 18 に記載しております | 1.125 | 1.125 | 13.5 | 112.5 |
| 24 に記載しております | 1.5 | 1.5 | 18 に記載しております | 150 にご提供いたしております |
| 32 | 2です | 2です | 24 に記載しております | 200 |
ザ・ CSS ユニット コンバータ 設定した基数に対してこのテーブル全体を生成するため、タイプ スケール全体を一度に目盛りを付けることができます。
ベースのフォントサイズはどのようにすべてを変えるのですか?
基本 (ルート) フォント サイズは、すべての相対ユニットのピボットです。 px と pt はそのままですが、変更すると、rem、em、% 変換もすべて変更されます。
ブラウザのデフォルトは16pxなので、そのためです 1rem は 普通 16px。 しかし、根は何にでも設定できます。 a popular pattern sets html { font-size: 62.5%; }、これは根を10px (16 の 62.5%) にします. さて 1rem は クリーン 10px、およびrem数学は " 小数点を移動" になる: 1.6remは16px、2.4remは24px、0.8remは8pxです。 teamsはこれを採用するので、スタイルシートの数値はピクセルのように読み込みながら、ユーザーの好みに応じてスケーリングします。
コンバーターでそれをモデル化するには、基本フォントサイズを10 に設定し、rem列を読みます。 24pxの値が1.5remではなく2.4remとして表示されるようになりました。 これは、独自のフォントサイズを設定するコンポーネントでemについて推論する方法でもあります: カードが設定された場合 font-size: 20px、その中の em 値は 20 に対する相対値なので、基底を 20 に設定して何を確認します 1.5em に解決します.
最もよく目にする間違いは、値がどの基数に対して計算されたかを忘れることです。誰かが 16px のルートを仮定して 24px を 1.5rem に変換し、それを 62.5% トリックを実行するプロジェクトにドロップします。ルートは 10px - で、1.5rem には 24px ではなく 15px があります。単位は相対的であるため、数値は基数がわかってから意味するものです。プロジェクト間に rem 値を貼り付けるときは、まずルートのフォント サイズを確認します。
どうやってpxをremに、remを手でpxに変換するのですか?
数学は 1 つの除算と 1 つの乗算です。
レムへのpx: ピクセル値をルート フォント サイズで割ります。
rem = px ÷ base
24px ÷ 16 = 1.5rem
13px ÷ 16 = 0.8125rem
10px ÷ 16 = 0.625rem
レムからpxへ: rem の値にルートのフォント サイズを乗算します。
px = rem × base
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32px
px から em 要素が基本フォント サイズにあるとき、rem と同じ式を使用します 24px ÷ 16 = 1.5em。違いは算術ではなく概念的なものです。em は現在の要素に対して測定されるため、その要素 & #39; のサイズがルートと異なる場合は、そのサイズを基点として使用します。
pxからptへ: 0.75 を掛けます 1px = 0.75pt。 そー 16px × 0.75 = 12pt。 逆行する、 pt × 1.333 = px。
pxから%: 基数で割って100 を掛けます. ですから 24px ÷ 16 × 100 = 150%。
これはどれも難しいことではありませんが、コンポーネントのスタイリング中に 40 回実行すると、疲労によって誤字が生じることになります。まさにそれが、反復的でエラーが発生しやすいタスクのようなものです 開発者の生産性向上ツール 哲学では、自動化を推奨しています。算術演算をオフロードして、設計に注意を向け続けるようにします。
各ユニットはいつ使用すればよいですか?
単一の正しい単位はありません;各ジョブに適切な単位があります。
フォントサイズには rem を使います. これはリストの中で最も強い推奨事項です。 Rem は user's ブラウザのフォント サイズの設定でスケールされます。これは実際のアクセシビリティに勝利し、ルートに固定されているため、予期せず複合することはありません。ほとんどのチームはすべてのタイプを rem でサイズ設定します。
システムに応じて、間隔に rem または px を使用します。 多くの設計システムでは、間隔がタイプに応じて拡大されるように、マージンとパディングを rem で表現します。ピクセルに完璧なレイアウトを実現するために、px で間隔を維持するものもあります。どちらも防御可能です。 1 つを選択して一貫性を持たせます。
独自の要素で拡張する必要があるものには em を使用します。 ボタン& #39; sフォントサイズで成長する必要がありますボタン上のパディングは古典的なemの使用です - emでパディングを設定し、それは自動的にテキストを追跡します 隣接するテキストに対する相対的なアイコンのサイズ設定は別のものです。
境界線と細かい部分には px を使用します。 あ 1px 通常、国境は維持されるべきです 1px;ヘアラインをフォント サイズで拡大縮小することはほとんどありません。メディア クエリ ブレークポイントも px で記述されることがよくありますが、ズームの動作には em を好む人もいます。
印刷スタイルシートでのみ pt を使用してください。 何かスタイリングをしている場合 @media print、ポイントは印刷のネイティブ単位であり、使用する価値があります。画面上では、pxまたはremを好みます。
流体幅と場合によってはフォント サイズには % を使用します。 パーセンテージはレイアウトのあらゆる場所にあります ()width: 50%)、フォント サイズとして、62.5% トリックを表すルートに使用されることがあります。
CSSユニットによくある間違いは何ですか?
1 つ目は、すでに説明したベースの不一致の問題です。間違ったルート フォント サイズに対する変換です。 rem 番号を信頼する前に、常にルートを理解してください。
2 つ目は精度の高い rem 値です 変換の中には均等に分割しないものもあります - 16px の底辺で 15px は 0.9375rem、13px は 0.8125rem それらの長い小数は正確ですが醜く、四捨五入するとレンダリングされたサイズがピクセルの数分の一だけシフトします 私のルール: rem には小数点を 3 つまたは 4 つ保持するか、きれいに分割する底辺とサイズの値を選択します コンバーターは賢明に丸め、末尾のゼロをトリミングします 24px と読む 1.5rem というより 1.5000rem。
3 つ目はemの合成です。 emのフォントサイズをそれぞれ設定する要素をネストすると効果が倍増するため、深くネストされたアイテムは意図したよりもはるかに大きくなったり小さくなったりする可能性があります。 emが驚くべきと判断した場合、その合成はほとんど常にその理由です - それらをremに切り替えると驚きは消えます。
4 つ目は、pt と px が交換可能であると仮定しています。 they are not; 12pt です 16px、ない 12px。画面と印刷にまたがるスタイルシートにそれらを混ぜると、微妙なバグになります。
Toolz.devコンバーターはどのように数学を処理しますか?
ボンネットの下でコンバータは 1 つのアイデアを使用します。すべてのユニットをピクセル数で表現し、ピクセルを通じて変換します。各ユニットには固定の "ピクセル毎に "基底フォント サイズが与えられると - px は 1、rem と em は基底、pt は 96/72、% は基底/100 になります。変換するには、入力に単位と #39;s 単位あたりのピクセルを乗算してピクセル値を取得し、ターゲット単位と #39;s 単位あたりのピクセルで割ります。その 1 つのパスによりすべての単位が一度に取得されるため、入力すると px、rem、em、pt、% が同時に更新されます。
また、値を単位を付けて解析するため、貼り付けます 24px 数字と単位の両方を入力します 結果は小数点以下数桁に丸められ、読みやすさのために末尾のゼロが削除され、それぞれにワンクリックコピーボタンがあり、単位接尾辞をCSSに貼り付ける準備ができている値と一致するすべてがクライアント側で実行されます - 入力したものはアップロードされません - プライバシー第一主義 サイト上のすべてのツールの背後にあります。
同じコンポーネントの色を選択したり、影を構築したりする場合も、 CSS 勾配発生器 あんど ボックスシャドウジェネレータ ワンクリックでライブ、そしてより広い範囲でライブします ユニットコンバータ 作業が CSS の外に出たときに、長さや重量などの物理単位を処理します。
よくある質問
PX を REM に変換するにはどうすればよいですか?
ピクセル値をルート フォント サイズで割ります。 ブラウザのデフォルトの 16px では、rem = px ÷ 16 であるため、16px は 1rem、24px は 1.5rem、8px は 0.5rem です。 コンバータにピクセル値を入力すると、設定したベースのフォント サイズに関係なく、REM に相当するものが即座に表示されます。
rem を px に変換するにはどうすればよいですか?
REM 値にルート フォント サイズを掛けます。 16px ベースでは、px = Rem × 16 です。つまり、1rem は 16px、1.5rem は 24px、0.75rem は 12px です。 HTML 要素が別の値を使用する場合は、ツールの基本フォント サイズを変更します。
デフォルトのルート フォント サイズは?
ブラウザはhtml要素をデフォルトで16pxに設定します、それがこのコンバータが16 で始まる理由です。 1remは常にルートフォントサイズに等しいので、そのデフォルトは16pxを正確に1remに等しくします。 users can change their browser' s default text size, which is one reason rem is preferred for accessible, scalable typography.
レムとエムの違いは何ですか?
rem は常にルート html のフォント サイズに対して相対的であるため、ページ全体にわたって一貫性が保たれます。 em は現在の要素のフォント サイズに対して相対的であるため、ネストされた要素がそれぞれ独自のサイズを設定したときに複合化できます。特定の em コンテキストをモデル化するには、ツールで基本フォント サイズを設定します。
PX と PT は CSS でどのように関係していますか?
CSSでは1 インチが96 ピクセル72 点と定義されているため、1ptは96/72 ‣ 1.333px、1pxは0.75ptとなる。 pointsは印刷タイポグラフィから来る; 画面上ではCSS参照ピクセルの固定倍数である。 pxまたはremを画面作業に使用し、ptを印刷スタイルシートに予約する。
62.5% のフォント サイズのトリックは何をするのでしょうか?
htmlのフォントサイズを62.5% に設定すると、ルートのフォントサイズが10pxになるので、1remは便利な10pxになり、remの数学は小数点を移動するように変わります - 1.6remは16px、2.4remは24pxです コンバーターでこれをモデル化するには、ベースのフォントサイズを10 に設定し、rem列を読み取ります。
フォント サイズに px または rem を使用する必要がありますか?
Rem は一般に、user's ブラウザのフォント サイズ設定に合わせて拡張されるため、フォント サイズに好まれます。これにより、アクセシビリティが向上しますが、固定 px は改善されません。多くのチームは px で設計し、最終的な CSS では rem に変換します。境界などのレイアウトの詳細は、多くの場合 px に留まります。
変換された値が時々長い小数になるのはなぜですか?
変換の中には正確ではないものもあります - 16pxの基数で15pxは0.9375remで、pt値はしばしば繰り返しの小数を生成します ツールは小数点以下数桁に丸め、読みやすさのために末尾のゼロをトリミングします ピクセルパーフェクトレイアウトの場合、rem値を小数点以下2、3 桁に丸めるか、サイズをきれいに分割する基数を選択します。
