レスポンシブ化が理解できません

Question

前提・実現したいこと

プログラミングを勉強し始めたのですが、レスポンシブ化のところでわからなくなってしまいました。
レスポンシブ前のコードからレスポンシブ後のコードがこうなるという回答を見てもなぜそうなるのかがわからないので困っています。

ここに質問の内容を詳しく書いてください。

該当のソースコード　CSS

/* ブラウザがそれぞれ持っているCSSをリセットするための記述 */
レスポンシブ化したコード
※@media screen and (max-width: 425px) のところが今回のレスポンシブ箇所

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #6c6b6b;

}

a {
text-decoration: none;
}

header,
nav,
h2,
.main-visual,
footer {
font-family: Chalkduster, "Bradley Hand", Courier, "Segoe Print", sans-serif;
}

header {
width: 90%; /* 横幅 */
padding: 15px 0;
margin: 0 auto;
text-align: center;
position: relative;
}

.social i {
display: inline-block;
margin-left: 20px;
}

.social {
position: absolute;
top: 22px;
right: 22px;
}

header .heading {
/* headerタグ内のheadingクラスにのみ反映される */
font-size: 32px;
}

.nav-list {
text-align: center;
padding: 10px 0;
margin: 0 auto;
}

.nav-list-item {
list-style: none;
display: inline-block;
margin: 0 20px;
}

.main-visual {
width: 100%; /* 横幅いっぱい /
height: 300px; / 高さ300px /
background-image: url(img/mv.jpg);
background-size: cover; / 縦横比を維持したまま背景領域を埋め尽くす /
background-position: center; / 背景画像を中央に配置 */
}

.main-visual-content {
width: 40%; /* 横幅40% /
height: 300px; / 親の高さに揃える /
background-color: rgba(0, 0, 0, 0.5); / 背景色を半透明の黒にする /
text-align: center; / 文字を中央揃えにする /
padding-top: 105px; / 上側の内側余白で垂直方向の位置を調整 */
}

.main-visual-text {
color: #fff; /* 文字色を白に変更 */
}

.main-visual-name {
margin-top: 30px; /* 上側の外側の余白 /
color: #fff; / 文字色を白に変更 */
}

main {
width: 800px; /* 横幅800px /
display: flex; / Flexboxの利用 /
justify-content: center; / 要素の横並び・中央寄せ /
margin: 0 auto; / 要素の中央揃え /
padding: 70px 0; / 上下に70px、左右に0pxの内側余白 */
}

.blog {
width: 540px;
margin-right: 30px; /* 領域の右側余白 */
}

.blog-heading {
border-bottom: 8px solid #f7f7f7;
text-align: center;
line-height: 0.6;
}

.blog-box {
padding-top: 50px;
}

.blog-item {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #f7f7f7;
display: flex;
justify-content: flex-start;
}

.blog-image {
height: 180px;
}

.blog-text {
padding: 25px 0 0 30px;
}

.blog-text-heading {
padding-bottom: 15px;
}

.blog-date {
font-size: 12px;
display: inline-block;
}

.category {
display: inline-block;
padding: 5px 8px;
background-color: #acabab;
border-radius: 3px;
color: #fff;
font-size: 11px;
}

.pagination {
text-align: center;
padding-top: 50px;
}

.pagination p {
display: inline-block;
width: 30px;
height: 30px;
margin: 0 5px;
color: #fff;
background-color: #acabab;
border-radius: 3px;
line-height: 30px;
}

.sidebar {
width: 230px;
}

.common-heading {
border-bottom: 8px solid #f7f7f7;
text-align: center;
line-height: 0.6;
}

.sidebar-contents {
padding: 50px 0;
}

.popular-text,
.categories-text {
padding-bottom: 5px;
border-bottom: 1px solid #f7f7f7;
margin-bottom: 5px;
}

.popular-text:last-child,
.categories-text:last-child {
margin: 0;
padding: 0;
border: none;
}

.instagram .sidebar-contents {
display: flex;
flex-wrap: wrap;
}

.instagram-box {
width: 110px;
padding-top: 110px;
background-size: cover;
background-position: center;
margin-bottom: 10px;
}

.instagram-box:nth-child(odd) {
margin-right: 10px;
}

.instagram-box:nth-child(1) {
background-image: url(img/airport.jpg);
}

.instagram-box:nth-child(2) {
background-image: url(img/japan.jpg);
}

.instagram-box:nth-child(3) {
background-image: url(img/snow.jpg);
}

.instagram-box:nth-child(4) {
background-image: url(img/japan2.jpg);
}

.instagram-box:nth-child(5) {
background-image: url(img/lake.jpg);
}

.instagram-box:nth-child(6) {
background-image: url(img/road.jpg);
}

footer {
width: 100%;
height: 120px;
text-align: center;
line-height: 120px;
background-color: #848282;
}

@media screen and (max-width: 425px) {
header {
width: 100%;
}

.nav-list {
width: 100%;
}

.nav-list-item {
width: 100%;
margin: 0 0 10px 0;
}

.social {
display: none;
}

.main-visual-content {
width: 100%;
}

main {
width: 100%;
display: block;
}

.blog {
width: 100%;
margin: 0;
}

.blog-box {
padding-left: 2%;
padding-right: 2%;
}

.blog-image {
width: 49%;
}

.blog-text {
width: 49%;
padding-top: 5px;
}

.sidebar {
width: 100%;
padding-left: 3%;
padding-right: 3%;
}

.instagram-box {
width: 48%;
padding-top: 48%;
}

.instagram-box:nth-child(odd) {
margin-right: 4%;
}

.pagination {
margin-bottom: 50px;
}
}

ここにより詳細な情報を記載してください。

不明点
下記の箇所で２％や４９％や３％といった箇所
この数値がどういう計算で出るのかが理解できておりません。

.blog-box {
padding-left: 2%;
padding-right: 2%;
}

.blog-image {
width: 49%;
}

.blog-text {
width: 49%;
padding-top: 5px;
}

.sidebar {
width: 100%;
padding-left: 3%;
padding-right: 3%;
}

.instagram-box {
width: 48%;
padding-top: 48%;
}

.instagram-box:nth-child(odd) {
margin-right: 4%;
}

Answer 1

レスポンシブ化が理解できない、というよりも、（少なくともコードだけ見ると）論理的な意味のない数値に対して「その数値にどんな意味があるのだろう」と深く考えすぎているだけ、のように思えます。

.blog-box {
padding-left: 2%;
padding-right: 2%;
}

の場合、画面サイズが

425pxよりも大きい時はblog-boxの左右paddingは不要なレイアウト、

425px以下の時はblog-boxの左右paddingが2%不 必要なレイアウト、

というだけで、この2%にはおそらく論理的な理由は無いと思いますよ。

Answer 2

下記の箇所で２％や４９％や３％といった箇所

この数値がどういう計算で出るのか

計算して出すものではなく、「幅が狭いときに作りたいレイアウト」に合わせて数字を決めただけ、という可能性はないでしょうか？

Comments

[DDDlucky]

お教えいただきありがとうございます。
レスポンシブじゃない状態からレスポンシブにする際に、なにか比率でを計算するものと勝手に思っていたのですが、その数値は実際に画面に表示させて、サイズを変更させたりしながら良さそうなバランスをさぐっていくという感じなのでしょうか。

[maisumakun]

> レスポンシブじゃない状態からレスポンシブにする際に、なにか比率でを計算するものと勝手に思っていたのですが

その考え方は必ずしも正しくありません。幅が狭いときに「全く違うレイアウト」にしてしまっても構いません。