CSSにおけるpxの使い所を知りたい

Question

今CSSを学んでいるのですが、
素朴な疑問として、サイズにおける px の使用するタイミングが知りたいです。

デザイン・コーディングしてて思うのが、pxで指定するとよくレイアウト崩れや、ウインドウサイズを変えたときに縦横比を保ったまま伸縮されなくて困ったりします。
なので、pxより%で指定したほうがいいのかと思ったりします。
pxの使用どころはどういったタイミングなのでしょうか？

特に具体的なシチュエーションとして、
レスポンシブデザインのデザイン・コードで既存のものでpxが使われていたりします。（margin,padding,border,heightなど）
レスポンシブなので絶対値が設定されていると不具合が起きそうですが、それはどうなのでしょうか？

教えて頂けますと幸いです。

Answer 1

レスポンシブなので絶対値が設定されていると不具合が起きそうですが、それはどうなのでしょうか？

とくに、細い線はborder-width: 1pxのように一律で指定しておくのが適切でしょう。「画面の拡大・縮小に合わせて線が太くなっていったり、逆に細くなって消えてしまったり」といった挙動をするほうが不適切な場面も多いです。

レイアウトについては、calcやbox-sizingを適切に設定することで、変化する幅の分を織り込んでレイアウトできます。

Comments

[maisumakun]

「レスポンシブデザイン」といっても、

・（Teratail自体もそうですが）ある程度以上広い幅の場合、幅の変化に完全に追随するわけではなく、コンテンツは一定の幅にとどめて残りは余白にする
・入力フォームや本文など、画面比例のフォントサイズにすると逆に使いづらい、読みづらい状況になるので固定サイズにする

など、「固定サイズを使うのが適当な場面」も多々あります。

[solMackartony]

ご回答頂きありがとうございます。少しスッキリし腑に落ちました。
たしかにborderがリサイズによって太くなるのは嬉しくないですもんね。
この画面自体も調べると幅がpxで指定されていたので、そういったポイントで使うのかと感じました。

calcやbox-sizingの使い方に関してもまだ使い所を理解できていないので調べてみます！