レスポンシブ・ナビゲーション（CSSのみ）

Question

スマートフォン用の垂直ナビゲーションバーとデスクトップ用の水平ナビゲーションバーを作成するにはどうすればよいですか？

私は、この例のナビゲーションバーが必要です。https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_dropdown

Answer 1

使用メディアクエリを。これらを使用して、ブレークポイントを定義します。各ブレークポイント内で、あなたのdiv要素に異なるCSSルールを割り当てることができるなど

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

この例ではあなたは、単に所望の効果を得るために100％に幅変更することができます。しかし、必要なブレークポイントでメディアクエリを実行すると、画面サイズに応じて2つの+スタイルがあります。

example css

Answer 2

あなたは、異なる画面サイズで任意の要素に完全に異なるスタイルを与えることができます。ただ、メディアクエリを使用します。https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

：

@media (max-width: 768px /* Styles for 768px screen size and smaller */) { 
    .element { 
     background: red; 
    } 
} 

@media (min-width: 768px /* Styles for 769px screen size and larger */) { 
    .element { 
     background: blue; 
    } 
} 

はここに役立つリンクです