Responsiveデザインでの幅設定について

Question

こんばんは、

Responsiveデザインについてなのですが、要素の幅を設定するときはPXはなるべく使わない方がいいんですか？

あるページの模写を練習でしていて、PCページを作った際に結構pxで設定してしまい、タブレット版を書いていくときに空白ができたりしてぐちゃぐちゃしてしまい少しつまづいています。
pxを使った方が良い場所や物、使うべきでない所を教えていただけるとありがたいです。

初歩的で申し訳ありませんがよろしくお願いします。

Comments

[2KOH]

これは、このサイトで推奨していない「漠然とした興味から票を募るような質問」に該当する質問ですか？

Answer 1

max-width: 780px;
width: 100%;

のように「px指定」と「%指定」を共存させる方法もあります。

上記の例だと、
要素の幅が 780px よりも広い場合は width: 780px で表示され、
スマホなどの閲覧時に要素の幅が 780px よりも狭くなった場合はwidth: 100% が優先されます。

逆に min-width: **px を利用して 幅が狭くなりすぎても要素が一定px以上小さくならないといった工夫もできます。

Answer 2

私が最近まで関わっていたシステムのマルチデバイス対応としては「rem」を使用していました。（PCとタブレットで参照するシステム）
remはhtmlのfont-sizeが基準となる相対値の単位で、html要素に16pxと指定した場合には、16px=1remとなります。
このhtmlタグに指定した1remをもとにして各要素には相対値をはめていけばデバイスのサイズが変わっても相対的に伸びたり縮んだりしてくれます。
「レスポンシブ rem」とかで調べると色々情報が出てくるので参考にしてください