おすすめ動画配信サイト7選!

【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サイトの表示に合わせて調整し、見やすい最適な表示にすることです。

おわりに

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

ごり子
ごり子

読んでくれてありがとう!

Technology
スポンサーリンク
Study Gorilla

コメント