Responsive Navigation (nur CSS)

Question

Wie kann ich eine vertikale Navigationsleiste für Smartphones und eine horizontale Navigationsleiste für Desktops erstellen?

Ich brauche eine Navigationsleiste für dieses Beispiel: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_navbar_dropdown

Answer 1

Verwenden Medienanfragen. Mit diesen definieren Sie einen Haltepunkt. Innerhalb eines jeden Haltepunkt können Sie verschiedene CSS-Regeln zu Ihrem divs usw. zuweisen

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

Mit diesem Beispiel können Sie einfach auf 100% Breite ändern, um den gewünschten Effekt zu erzielen. Führen Sie dies jedoch in einer Medienabfrage an Ihrem gewünschten Unterbrechungspunkt durch und auf diese Weise haben Sie zwei + Stile abhängig von der Bildschirmgröße.

example css

Answer 2

können Sie ein beliebiges Element geben völlig verschiedene Stile in unterschiedlichen Bildschirmgrößen. Medien-Anfragen benutzen Sie einfach:

@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; 
    } 
} 

Hier ist ein hilfreicher Link: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp