質問: **実現したいこと** レスポンシブ対応の各ブレークポイントの大きさが適応されずに困っています。 @media screen and (max-width: 400px){ @media screen and (max-width: 500px){ の2つのブレイクポイントを指定しているのですが、300px代のスマホ幅でも(max-width: 400px)の方の大きさを適応したいのですが、max-width: 500pxの大きさが適応されてしまいます。 入力フォームの横幅width: 92%;をレスポンシブ対応(max-width: 400px)で適応したいのですが、 (max-width: 500px)で指定したwidth: 73%;が適応されてしまいます。 **試したこと** (max-width: 400px)を(min-width: 400px)にしてみたのですが、(min-width: 400px)にすると .flex3{ flex-direction: column;をスマホのサイズの場合のみ指定したくて指定のですが、PCサイズでも適応されてしまうため、max-widthにしています。 今までレスポンシブ対応ではmin-width:で書いていたのでmin-width:で書きたいのが本音なのでが。 クロームのディベロッパーツールを使っています。 ``` LPページ 初期申込フォーム 私は台湾出身です。 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 私は香港出身です。 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、テキスト、 名前:※ ``` ``` /* 空白の設定 */ .kuuhaku2{ margin-top: 25px; } /* 画像の横の説明文の設定 */ .title3 div{ font-size: 20px; color: rgb(68, 68, 68); letter-spacing: 0.1em;/* 文字と文字の横の余白 */ line-height:32px; } /* 画像の横に文字を配置する */ .flex3{ display: flex;/* 画像の横に文字を配置する */ padding: 10px; width: 1000px;/* 文字の列数を横に多くする */ margin: 0 auto; justify-content: start; align-items: center; } .flex3>div{ margin: 10px; padding: 10px; } /* 画像の横にタイトル) */ .title3 p{ margin: 8px; font-size: 34px; line-height:45px; color:rgb(30, 13, 189); } /* 画像の大きさ調節 */ img.example20{ height: 160px; } /* pxで指定 入力フォーム文字サイズ、太さ*/ .px-num{ line-height: 40px;/* 文字の行間 */ font-size: 26px;/* 文字の大さ */ font-weight: 900;/* 文字の太さ */ text-align: center;/* 文字を中央に配置 */ color: #63e02d; } /* 入力フォームのスタイル */ #name { margin:0 auto; text-align: center; border: 3px solid #63e02d; /* 枠線 */ background-color: snow; /* 背景色 */ width: 29.3em; /* 横幅 */ height: 56px; /* 高さ */ font-size: 1em; /* テキスト内の表示文字サイズ */ line-height: 1.2; /* 行の高さ */ box-sizing: border-box;/* レスポンシブ対応中央 */ } ``` ``` /* 画面幅(400px以下の時までの適応)指定 */ @media screen and (max-width: 400px){ /* 空白の設定 */ .kuuhaku2{ margin-top: 25px; } /* 画像の横の説明文の設定 */ .title3 div{ font-size: 17px; color: rgb(68, 68, 68);/* 文字の色 */ letter-spacing: 0.1em;/* 文字と文字の横の余白 */ line-height:28px; } /* 画像の横に文字を配置する */ .flex3{ flex-direction: column;/* スマホで画像、タイトル、文章を縦表示max-widthでなければ何故かpc表示の大きさ に個別に指定しても真ん中に配置される。なので、min-widthからmax-eidthにしています。 */ display: flex;/* 画像の横に文字を配置する */ padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 1px; width: 300px;/* 文字の列数を横に多くするスマホサイズに合わせる縮小 */ margin: 0 auto; justify-content: start; align-items: center; } .flex3>div{ margin: 10px; padding: 10px; } /* 画像の横に文字のスタイル(タイトル) */ .title3 p{ margin: 8px; font-size: 21px; line-height:30px; color:rgb(30, 13, 189); } /* 画像の大きさ調節 */ img.example20{ height: 160px; } /* 入力フォーム */ #name { height: 38px; width: 92%; font-size: 1em; /* テキスト内の表示文字サイズ */ } /* pxで指定 入力フォーム文字サイズ、太さ*/ .px-num{ font-size: 17px;/* 文字の大さ */ } } /* 画面幅(500px以下の時までの適応)指定 */ @media screen and (max-width: 500px){ /* 空白の設定 */ .kuuhaku2{ margin-top: 25px; } /* 画像の横の説明文の設定 */ .title3 div{ font-size: 17px; color: rgb(68, 68, 68);/* 文字の色 */ letter-spacing: 0.1em;/* 文字と文字の横の余白 */ line-height:28px;/* 行間の高さ */ } /* 画像の横に文字を配置する */ .flex3{ flex-direction: column;/* スマホで画像、タイトル、文章を縦表示max-widthでなければ何故かpc表示の大きさ に個別に指定しても真ん中に配置される。なので、min-widthからmax-eidthにしています。 */ display: flex;/* 画像の横に文字を配置する */ padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 1px; width: 300px;/* 文字の列数を横に多くするスマホサイズに合わせる縮小 */ margin: 0 auto; justify-content: start; align-items: center; } .flex3>div{/*セレクタを.flex直下のdivだけに適用する形の「.flex>div」とする(title3 divを適応させるため) */ margin: 10px; padding: 10px; } /* 画像の横に文字のスタイル(タイトル) */ .title3 p{ margin: 8px; font-size: 21px; line-height:30px; color:rgb(30, 13, 189); } /* 画像の大きさ調節 */ img.example20{ height: 160px; } /* 入力フォーム */ #name { width: 73%; border: 3px solid #63e02d; /* 枠線 */ height: 43px; font-size: 1.1em; /* テキスト内の表示文字サイズ */ } /* pxで指定 入力フォーム文字サイズ、太さ*/ .px-num{ font-size: 17px;/* 文字の大さ */ } } ```
回答: @media screen and (max-width: 400px){ @media screen and (max-width: 500px){ の順番を逆にすればいいのでは。