CSS design tools
PX to REM Converter
Convert pixels to rem, rem to pixels, bulk CSS values, and quick reference sizes with a custom root font size.
The conversion is deterministic: rem equals px divided by the root font size.
Quick Reference
| Pixels | REM | |
|---|---|---|
| 8px | 0.5rem | |
| 10px | 0.625rem | |
| 12px | 0.75rem | |
| 14px | 0.875rem | |
| 16px | 1rem | |
| 18px | 1.125rem | |
| 20px | 1.25rem | |
| 24px | 1.5rem | |
| 32px | 2rem | |
| 48px | 3rem | |
| 64px | 4rem |
Bulk Converter
Paste multiple px values separated by spaces, commas, or newlines.
よくある質問
Q. remとpxの違いは何ですか?
A. pxはピクセル単位の絶対値です。remはルート要素(html)のフォントサイズを基準にした相対単位です。ブラウザのデフォルトは16pxなので、1rem = 16pxになります。
Q. なぜCSSでremを使うべきですか?
A. remを使うとユーザーがブラウザのフォントサイズ設定を変更した際にレイアウトが適切にスケールします。アクセシビリティ向上や、レスポンシブデザインの実装に有効です。
Q. ベースフォントサイズはどこで変更しますか?
A. 本ツール上部の「ベースフォントサイズ」入力欄で変更できます。プロジェクトのhtml要素に指定したfont-sizeに合わせて設定してください。
Custom base size
Use 16px defaults or match your app's html font-size.
Bulk conversion
Convert multiple CSS values at once for refactors and design-system cleanup.
Example values
Try 12px, 16px, 24px, 32px, or 1.5rem to verify common design tokens.
PX and REM Basics
Root-relative sizing
One rem equals the root element font size. In many browsers this starts at 16px unless the site or user changes it.
Accessibility
Rem-based font sizes and spacing can scale with user preferences, improving readability for people who need larger text.
When px still helps
Use px for borders, hairlines, and fine visual details that should not scale with text size.
Validation
The converter keeps numeric inputs bounded and clear, so invalid values do not produce misleading CSS.
FAQ
How do you convert px to rem?
Divide the pixel value by the root font size. With a 16px root, 24px becomes 1.5rem.
How do you convert rem to px?
Multiply the rem value by the root font size. With a 16px root, 1.25rem becomes 20px.
Why use rem units?
Rem units scale with the user's root font size setting, which helps typography and spacing remain accessible.
Does the converter store input values?
No. Conversions are calculated locally in the browser and are not sent to a server.