px, rem, em, %の使い分け

Question

CSSで指定できる単位は、どのように使い分けるのが良いのでしょか。
それぞれの違いについてのページはたくさん見つかるのですが、「どの場面でどの単位を使うのが望ましいか」についての信頼できる情報は見つかりませんでした。

絶対的な正解は無いのかもしれませんが、このたび私の運営するサイトのデザインを大幅に改修することになったので、このあたりの理解を深めたいと思っています。

現状の私の認識は以下の通りです。

font size : remで指定
文字の周りのmargin,padding : remで指定
画像や領域の幅など : %で指定

この認識で間違っている部分があれば指摘してください。
また、これらの単位の使い分けに関係する情報で、有益なものがあれば教えていただけると幸いです。

//追記
ご指摘ありがとうございます。
サイトはこちらです。
https://mcbattle-ch.jp/
8割がスマートフォン、2割がpcからのアクセスです。

Comments

[yoshinavi]

PC、タブレット、スマホの各デバイスやレイアウトで適切な単位は変化しますので、一概には「コレ」と、決めれないかと思います。場合によってはvw、vhも有効になると思いますよ。

[m.ts10806]

たぶん「こういう場面ではどの指定が適切か」のよな具体例を実例加味して出されたほうが良いように思います。同指定が使える機能がいくつもある以上「これはこうでないといけない」という絶対的な答えはありません。

Answer 1

「レスポンシブ対応」と言っても使用単位は質問者さんもお分かりのように、デバイス幅等の場面によって「固定」か「変動」を選択するのは最終的なデザインによります。

font size : remで指定

文字の周りのmargin,padding : remで指定
画像や領域の幅など : %で指定

ブレイクポイントをしっかり定めれば、これでも問題無いと思います。

※個人的な見解ですが、fontのサイズは「vw」で指定することが最近は多いです。デバイス幅によるデザインの上でバランスが取り易いように思います。

Comments

[d0ne1s]

ありがとうございます。
vwを調べて見ましたが、役に立つ場面の多そうな便利な指定方法ですね。
参考になりました。

[yoshinavi]

そうですね。remで固定させても良いですが、各見出しやキャッチコピー的な部分だと、周囲の余白も同バランスで見栄え良くしたいとの要望が、最近は多くなっているので、文字周りのpadding等もvwで指定する事もあります。
※あくまでも個人的な感覚であり、絶対ではありません。

[yoshinavi]

解決されて何よりです。
(^^)

[d0ne1s]

ありがとうございました。