htmlの解像度について(CSSも)

###html
って一般的に横幅を1000pxくらいを想定してつくりますよね。
そこで疑問がわき出てきたのですが、もしその1000pxを想定して作られたWEBが4Kディスプレイ(PC)で見た場合って表示が崩れないですか？逆に1920pxや4Kpxで作った場合って1349pxのディスプレイなどではどう表示されるのでしょうか？
一般的にはどのようにこれを解決しているのでしょうか？
もし知っている方や分かる方がいれば教えてください。（；´д｀）ゞ

kirin311

2020/06/14 04:58

とりあえず、一般的に１０００ｐｘを想定云々についてはわかりませんけど解決方としては、いくつかあります。・そもそも横幅をｐｘ指定でなく％やvwで指定する・CSS Flexboxを利用する・メディアクエリを使うといった事が挙げられます。

退会済みユーザー

2020/06/14 05:10 編集

なるほど、ありがとうございます

行動規範の内容に同意します

回答3件

レスポンシブウェブデザイン、で一度調べてみてはいかがでしょうか。内容的にはpcとスマホを比較することですが、似たような話だと思います。

投稿2020/06/14 04:56

yuuyu

総合スコア1139

退会済みユーザー

2020/06/14 05:08

調べては見てみたのですが、さっき質問してみたようなことは載っていませんでした。

yuuyu

2020/06/14 05:35

どこまで細かく解決したいのでしょうか？例えばどの端末から見ても同じように表示させたい場合は、全要素のサイズをパーセンテージで指定すればほぼ同じになります。例えばteratailのように右側に広告を置いている場合、スマホだと質問エリアが小さくなってしまうので、質問と解答の間に広告を入れるなど、横幅のサイズに応じて表示形式を変更しています（これがレスポンシブウェブデザインです）例えばPCでも1000pxと1920pxだと2倍の差がある場合はどうするか、これは先ほどの上記二つのどちらかでもいいし、もしくは余った空間は空白にするということもできます。サイズが変わった時にどう表示したいか、具体的な目標がないと、解答は無限にあるので、その点は承知ください。

退会済みユーザー

2020/06/14 10:24

なるほど。実は私には、どこまで細かく解決したいとかはないのですが、一般的な最近のイケてるＷｅｂやＬＰなどでは、どのような仕組みが多いのか知りたいのです。

行動規範の内容に同意します

px指定、メディアクエリを使う場合の例を挙げてみます。

[レスポンシブのイメージ (あくまで一例です)]

スマホのときはとりあえず縦並びにする
タブレット(480〜768pxくらい?)、もしくはPC (100pxくらい?) のときに、

必要に応じて横並びのレイアウトが出てくる
3. 1000pxより大きいメディアクエリでは、縦並びだった要素が横並びになることはあまりなく、
余白や横幅、文字サイズが大きくなっていくのみ

CSS
1.btn {
2  display: block;
3  width: 100%;
4  font-size: 16px;
5}
6
7@media screen and (min-width: 480px) {
8  .btn {
9    width: 320px; /* ボタンの横幅を決める */
10  }
11}
12@media screen and (min-width: 768px) {
13  
14}
15@media screen and (min-width: 1000px) {
16  .btn {
17    font-size: 18px;
18  }
19}
20@media screen and (min-width: 1280px) {
21  .btn {
22    width: 360px;
23  }
24}
25@media screen and (min-width: 1500px) {
26  .btn {
27    font-size: 22px;
28  }
29}

HTML
1<div class="item">
2  <div class="img"><img src="" alt=""></div>
3  <div class="content">
4    <h3 class="title">タイトルタイトルタイトルタイトル</h3>
5    <p>テキストテキストテキストテキストテキストテキストテキスト</p>
6    <a class="btn" href="">ボタン</a>
7  </div>
8</div>

CSS
1.item {
2  
3}
4.item .img {
5  margin-bottom: 20px;
6}
7.item .content *:not(:last-child) {
8  margin-bottom: 10px;
9}
10
11
12@media screen and (min-width: 480px) {
13  
14}
15@media screen and (min-width: 768px) {
16  .item {
17    display: flex;
18  }
19  .item .img {
20    margin-bottom: 0; /* スマホ時に指定した下方向の余白をキャンセル */
21    margin-right: 20px;
22    
23    flex: 0 0 200px; /* 「.item .img」は200pxで固定 */
24  }
25  .item .content {
26    flex: 1 1 0%; /* 「.item .content」は余った横幅をすべてもらう */
27  }
28}
29@media screen and (min-width: 1000px) {
30  .item .img {
31    margin-right: 30px;
32    flex: 0 0 250px;
33  }
34
35  .item .content *:not(:last-child) {
36    margin-bottom: 20px;
37  }
38}
39@media screen and (min-width: 1280px) {
40  .item .img {
41    margin-right: 40px; /* 徐々に余白を大きくする */
42    flex: 0 0 400px; /* 徐々に横幅を大きくする */
43  }
44}
45@media screen and (min-width: 1500px) {
46  /* 必要であれば大きい横幅での指定を追加していく */
47}