レスポンシブ タブレット表示だと要素が重なる

Question

LPを制作しています。

画像のようにグローバルナビと画像（png）の各要素が被ってしまいます。（heightを固定してるため）

height:50vhなどとすると、
サイズの違うデスクトップモニターで見たときにサイズ感が上手く行かなかったり。

うまくタブレット（縦に短いディスプレイと、デスクトップモニターのレスポンシブ）に対応させる方法はありますか？

@media screen and (min-width:270px) { 
 
}
@media screen and (min-width:480px) { 
 
}
@media screen and (min-width:600px) { 
 
}
@media screen and (min-width:684px) { 
 
}
@media screen and (min-width:843px) {
 
}
@media screen and (min-width:980px) {
 
}

追加
上記メディアクエリを使用しています。

widthでレスポンシブしてるので
タブレット横 （横幅は長いけど縦は短い） にしたときにレイアウトが崩れてしまいます。。。

Comments

[kei344]

具体的に出力されたHTMLおよびCSSなどを質問文に追記いただいたほうが回答を得られやすいと思います。

Answer 1

1. 番号リストグローバルナビ部分のheight固定、コンテンツ部分のmargin-topをグローバルナビのheight分あける。＜余白をあけたいならその分プラス
2. それをそれぞれのメディアクエリにいい感じに調整したものを書く。

とりあえず重なるということはグローバルナビ部分にabsoluteかfixedが指定されていると見てこんな感じですかね。

JSが使用できるのであれば、グローバルナビのheightを取得してコンテンツのmargin-topに入れればもっといい感じになると思います。

Answer 2

メディアクエリを使ったら、としか…

• レスポンシブの基本、メディアクエリの書き方

Answer 3

スマホとタブレットの時はサンバーガーメニューにしています。
ハンバガーメニューの場合は縦幅は100vhで画面いっぱいに広がるようにして
中の文字(要素)はできるだけheightの指定は避けてpaddingやmarginで
作成するようにしています。

vw指定はメディアクエリ内のみでの使用などかなり気をつけないと
サイズが大きすぎたり小さすぎたりしてしまうので怖くてあまり使っていないです。
最低~最大のpxやemを指定してその間はcalcで変化するようになどでvwとvhは
最後の手段として極力使わないようにしています。