【CSS】positionがずれる！スマホやIpadなどデバイスを変えた時の位置ずれ解決法

position:absolute;がスマホだとずれる。

どう調整しても絶対にずれて面倒なことありますよね。

そんな時は親要素にposition:relative;つけてから
子要素にposition:absolute;にしてみましょう。

いくぶんかましになるはずです。

また、@media screen and (max-width: 480px){}でスマホでの位置を調整するか

max-width:100;%でレスポンシブな状態にしておきましょう。

親要素にposition:relative; を付けることで防ぐ

position:absolute;は親要素から位置指定をすることになります。

親要素にposition:relative;つけることで、基点をつくり画面の変化によるずれを防ぎます。

それでもちょっとずれる

@media screen and (max-width: 480px){} を付けましょう。

.reidai{
position:relative;
}
.reidai:before{
position:absolute;
left: ？px;
margin-top: ？px;
}
@media screen and (max-width: 480px){
.reidai:before{
position:absolute;
left: 修正値;
margin-top: 修正値;
}
}

上記の様にスマホ用の修正値を入れましょう。

@media screen and (max-width: 480px)
これは画像のサイズが480pxの時、つまりスマホのサイズの時にという意味です。

max-width:100%;max-height:100%;でレスポンシブ対応

max-widthは画面のサイズに合わせて画像のサイズを変えてくれます。

手軽にできます。

そもそもレスポンシブ対応とは？

レスポンシブ対応とは、PCやタブレット、スマートフォンなど、様々な画面サイズの幅をWebサイトの表示に合わせて調整し、見やすい最適な表示にすることです。

おわりに

もっといい方法がないか探しています。