Q&A
書いているコードは「それだけ」で間違いありませんか？
（提示されたコード「以外」が当該の現象を起こしている可能性はありませんか？）
よろしくお願いします。
レスポンシブのサイトを制作しています。
cssの構造について質問ですが、
レスポンシブで制作したページをスマホ実機で確認すると
下層のブッレイクポイント( max-width: 414px)に設定したcssが
影響してレイアウトがズレます。
現在cssを、下記のように細かくセットしています。
@media screen and ( max-width: 414px) {
.mailform input.mailbutton{display:inline-block;width:4.1em;height:2.05em;margin:0;vertical-align:top; padding:0;}
}
@media screen and ( max-width:384px) {
.mailform input.mailbutton{display:inline-block;width:3.8em;height:2em;margin:0;vertical-align:top; padding:0;}
}
@media screen and ( max-width: 375px) {
.mailform input.mailbutton{display:inline-block;width:3.5em;height:1.9em;margin:0.05em 0 0 0;vertical-align:top; padding:0;}
}
とした時
iphone8plu(max-width: 414px)の実機で見てみると、下層のmax-width: 375pxにセットした
.mailform input.mailbutton{display:inline-block;width:4em;height:1.9em;margin:0.05em 0 0 0;vertical-align:top; padding:0;}を認識してズレが起こってしまいいます。
原因は何なのでしょうか？
各ブレイクポイントのコードを認識させる方法をご教授ください。
宜敷くお願いいたします。
https://jsfiddle.net/4krLzvty/
パソコンから幅を調整して実行してみましたが、指摘されたような現象は再現しませんでした。
maisumakun様
レスポンスありがとうございます。
>>書いているコードは「それだけ」で間違いありませんか？
・記述したコードは説明しやすくしたので実際のコードとは少し違っています。
>>（提示されたコード「以外」が当該の現象を起こしている可能性はありませんか？）
・現在、スマホ用ブレイクポイントではたまに起きていたと思います。
今回、36ページぐらい制作しているので記憶が曖昧ですが、
・・
今回のHTMLコーディングは
Macで主にchrome（デベロッパーツール）+テキストエディタを使い、
最終的にレスポンシブチェックはsafariで調整して仕上げ、
サーバーにアップしまた。
実機で確認したところ、ズレが出ていたので
直接サーバー内のcssファイルを調整していて
下層ブレイクポイント、384、735（細かく設定してますが）の影響が
特に出たので質問して見ました。
今は@media screen and ( max-width: 414px) {のみに
.mailform input.mailbutton{display:inline-block;width:45px;height:21px;margin:0 0 0 -0.1em;vertical-align:top; padding:0;}
にして、
iphone6s(375px)、iphone5(320px)で実機ではズレは出ません。
・・
最下層@media screen and ( max-width: 320px) {では
下のコードをこのまま記述していますが、干渉しません。
.mailform input.mailbutton{display:inline-block;width:45px;height:21px;margin:0 0 0 -0.45em;vertical-align:top; padding:0;}
・・
ブログでずれた内容や各ブラウザの表示結果を載せています。
https://ameblo.jp/design-sozai-119/entry-12657643537.html
説明がまずくてすみません。
以上、宜敷くお願いいたします。
あなたの回答
tips
プレビュー
