px
pxとはピクセル(pixel)の略です。
(ピクセルがわからない人は「ピクセルは画素とも呼ばれ画素数等でも知られるように画面上に存在する細かいドットのことなんだな」くらいの漠然とした認識で大丈夫です。)
pxで記述した場合、ディスプレイの解像度によって同じ大きさのディスプレイであっても文字のサイズは当然変わってしまいます。
%
%とはfont-sizeプロパティの値に対する相対的な値。
font-sizeが16pxだとすると、100%=16px、50%=8pxとなる。
em
emとはfont-sizeプロパティの値に対する相対的な値。
font-sizeが16pxだとすると、1em=16px、0.5em=8pxとなる。
rem
rem(root em)はルート要素()を基準としたemです。
仮にpタグの中にstrongタグがある場合emでは、親タグの影響を受けてしまいますが、remならルート要素を参考にするので影響を避けることが出来ます。
/* emによるよろしくない書き方 */
p {
font-size: 0.7em;
}
strong {
font-size: 0.5em;
ex
「x」の大きさを基準とした単位。
日本では殆ど使い途は無いでしょう。
他にも単位はありますが、あまり使い途が無いと思うので書きません。
viewport単位については複雑になるので別記します。