| プロパティ | 単位 |
|---|---|
| border-spacing | rem |
| flex-basis | rem |
| gap | rem |
| height | rem |
| width | rem |
| contain-intrinsic-width | rem |
| contain-intrinsic-height | rem |
| min-height | rem |
| max-height | rem |
| min-width | rem |
| max-width | rem |
| border-width | px |
| stroke-width | px |
| margin | rem |
| padding | px |
| scroll-margin | rem |
| scroll-padding | rem |
| text-indent | rem |
| translate | px |
| inset | px |
| font-size | rem |
| border-radius | rem |
| media queries | rem |
- キーワード値、単位無し値、パーセンテージは調査から除外
- ロングハンドプロパティは省略
- line-heightでは常に単位無し
- チェックボックスのborder-widthはアイコンの一部と捉えてremを使用
- 一部のプロパティではcalcを経由してrem/em/lhを使用
- その他、一部の例外あり
- react-spectrum/packages/@react-spectrum/s2/style/spectrum-theme.ts at b4382b073f6de422cd22d206696ef1e21eed01f3 · adobe/react-spectrum
- Devon Govett on X: "@efortis @jordwalke That page is built with Tailwind which uses rems for everything (not ideal). In our new design system, we use pixels for padding (to avoid excessive white space), absolute positioning, and borders, and rems for sizes of containers with text in them, and margins between paragraphs" / X