画面サイズに合わせたcssの書き方について

Question

html、css初心者です。
初歩的な質問ですみません。
現在webサイトを作成していて、解像度1920ピクセルのモニタに合うようにcssを書いたのですが、
このサイトをどのピクセルのモニタでも画面内の要素が崩れないように書きたいと考えています。
どのようにして書いたらいいでしょうか?

widthやheight等のpxで指定している箇所を％にしたり、
@media screen and (max-width: px)などですべてのモニタのピクセルに合わせてcssを
書いていく程度しか思いつきません。

Answer 1

widthやheight等のpxで指定している箇所を％にしたり、

@media screen and (max-width: px)などですべてのモニタのピクセルに合わせてcssを
書いていく程度しか思いつきません。

他の方法としては、「（Teratailもそのような構造になっていますが）幅が広いディスプレイでも全部使うのではなく、表示領域を一定の幅に限る」というような方法もあります。

---

Webサイトを芸術作品として構築するつもりなのなら話は別ですが、一般には使い勝手が重視されます。「画面内の要素が崩れない」ことに注力するより、画面幅が狭いならそれに合わせたレイアウトに組み替えるほうが、使いやすいサイトになる、ということはありえます。

Comments

[fujii-kun]

回答いただきありがとうございます。
レイアウトを組み替える方向で考えていきたいと思います。