大画面（15.6インチ）PCでレスポンシブデザインを行う際の考え方

Question

大変初歩的な質問で恐縮です。

現在15.6-インチのPCでコーディングをしています。
横幅が1500px以上あるのですが、一般的なPCは13インチ（1000pxほど）だと認識しています。

この場合は、画面幅を考えると一般的なPCである「横幅1000px」ほどに画面を縮めて、
横幅1000pxの画面をベースにコーディングするものなのでしょうか？

というのも、1500pxベースで作成したとすると、
1000pxだと多少のずれが生じてしまい綺麗なサイトにならないからです。

とはいえ、画面を縮めながらコーディングしたり、
「@media (max-width: 992px)」などを入れるのも時間がかかるなと思っております。。。
一般的にはどのようにコーディングしているのか疑問に思いました。

一応以下のレスポンシブには対応しているので、
タブレットとスマホは問題ないです。

@media screen and (max-width: 896px) 
}

@media screen and (max-width: 575px) 
}

宜しくお願い致します。

Answer 1

ちょっと質問の意図が読み取れないですが、あなたの質問の論旨にインチ数って何か関係ありますか？
「一般的なPC」は業務利用だとだいたい21インチ〜27インチで、解像度でいうとFHDからWQHDあたりかと思います。いっぽうiPhone 11 Pro Maxは6.5インチで解像度は1,242x2,688です。(Retinaなのでメディアクエリで考える場合は3で割る必要がありますが)

ところで、レスポンシブデザインについての回答ですが、一般的には境界線になる解像度の値を決めて、「これ未満ならスマホ、これ以上ならPC」の2つで割り切るか、「これ未満ならスマホ、これ以上ならPC、その間ならタブレット」の3つで割り切るかが主流と思います。
「PC」の領域であるならばその中で崩れないように作る必要があります。裏を返せば、崩れてしまうのはレスポンシブデザインになっていない (できていない) からです。
境界線となる数値にも主流の値があったりなかったりしますが、要件次第なところもあるので適宜ご自身で調べたり要件にアラインさせてみたりしてください。

Answer 2

横幅1000pxの画面をベースにコーディングするものなのでしょうか？

多少ズレが有るのを許容するか、幅によらないデザインにできるのであれば、ブレークポイントは省略しますし、
ズレを許せないのであれば、もちろん想定通りになるようにブレークポイント別にしっかり実装します。
ので、あなたやサイトの要件次第になるかと思います

とはいえ、画面を縮めながらコーディングしたり、

Chrome であれば Devtools を利用して、画像上部で画面幅を変更できます
| | | | | | | | のようなところで一般的な画面幅に設定できます。
ちなみにその設定だと 320px /.../ 768px / 1024px / 1440px / 2560px で分割されています。（ので、そのあたりをブレークポイントとするのが一般的なのかと

横幅が1500px以上あるのですが、一般的なPCは13インチ（1000pxほど）だと認識しています。

ちなみにこれはそうでもない気がします
https://lab.syncer.jp/Statistic/Screen-Size/