Wie verkleinere ich eine Kopfzeile bei einer bestimmten Auflösung?

Question

Ich bin fest in der Gestaltung eines Headers. Das Header-Design ist jetzt ein grauer Balken am oberen Bildschirmrand, auf dem sich das Logo links vom Bildschirm befindet und alle Header-Buttons auf der rechten Seite angeordnet sind. Die Kopfzeilenschaltflächen werden nach links verschoben.

Das Problem ist das Logo und Header wird sich mit einer bestimmten Auflösung überschneiden. Was ich erreichen will, ist, dass die Header-Buttons sich bei einer Startbreite von 1280px nicht mehr bewegen. Ab der Breite von 1280px und weniger möchte ich die Kopfzeile zu schrumpfen beginnen.

Gibt es eine Möglichkeit, dies mit Deklarationen in CSS zu tun? Wenn nicht, wie könnte ich das tun?

Answer 1

Versuchen css media query, in denen verwenden Sie unterschiedliche Stilregeln für unterschiedliche Auflösung einstellen, die möglicherweise die Header-Tasten Ausgabe

Answer 2

Sie es mithilfe @media in CSS Lage sein sollen, werden lösen acheive. Sie können die gleiche CSS-Klasse definieren für verschiedene Breite beeinflusst haben, wie zum Beispiel:

@media (max-width: 1280px) { 
    .header-button { 
    display: none; 
    } 
} 

Sie hier mehr über finden:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries