カテゴリー:
単位
閲覧数:630 配信日:2020-03-16 12:43
比較一覧表
| 指定 | 語源 | 内容 | 基準 | デメリット | 評価 |
|---|---|---|---|---|---|
| px | - | サイズを絶対値指定する | - | レスポンシブに対応しづらくなる可能性が高い | 極力使用しない |
| % | - | サイズを相対値値指定する | 親要素 | レスポンシブと相性が良い | 使用する |
| em | - | サイズを相対値値指定する | 親要素 | - | あまり使用しない。複雑なCSSだと、予期せぬ他への影響が生じることがあるため |
| rem | 「root em」の略 | サイズを相対値値指定する | ルート要素 | - | 使用する。基準が一元管理されることになるため、後からの修正が容易 |
| vw | viewport width | ビューポートの幅に対する割合(1/100) | ビューポート | - | あまり使用しない |
| vx | viewport height | ビューポートの高さに対する割合(1/100) | ビューポート | - | あまり使用しない |
| vmin | viewport minimum | ビューポートの幅と高さのうち、値が小さい方に対する割合(1/100) | ビューポート | - | あまり使用しない |
| vmax | viewport max | ビューポートの幅と高さのうち、値が大きい方に対する割合(1/100) | ビューポート | - | あまり使用しない |
個人的評価
ビューポート
・初めて知った際、何でも出来る「打出の小槌」かと期待するも、そうではなかった
・実際に試すと分かるが、パソコンとモバイルは縦横画面比率が異なる
・画面比率に応じて一律に文字大きさ等を変更しても、見た目は良い感じにならない
注意点
width は必ず親要素の width に対する割合で計算される
height は必ず親要素の height に対する割合で計算される