Wie kann ich meinen CSS Code optimieren?
Also ich muss mein CSS-Code so optimieren das er mit verschiedenen Auflösungen klappt. Ich hab schon bisschen rumproobiert aber weiß nicht wo oder wie ich das ändern könnte. Also es sol,l wenn ich F12 drücke und die verschiedenen Auslösungen auswähle immer passend aussehen.
Hier ist der HTML-Code: HTML - Pastebin.com
Und hier mein CSS-Code: CSS - Pastebin.com
3 Antworten
Es gibt dafür mehre Lösungen - eine davon wären Media Queris. Diese geben dir die Möglichkeit dich an den Viewport zu orientieren. Mit Media Queries sprichst du verschiede Viewport-Breakpoints an. Also z.B. horizontal 480 Pixel breite oder 1280px breite. Hier eine schöne Dokumentation dazu: https://wiki.selfhtml.org/wiki/CSS/Media_Queries/Medienabfragen_einbinden
Mit media queries kannst du CSS Anpassungen für kleinere Bildschirme machen.
Würde zum Beispiel so aussehen:
@media only screen and (max-width: 1024px) {
.my-btn {
width: 100%;
}
.my-container {
flex-direction: column;
}
}
Du kannst auch mehrere Queries hintereinander schreiben, zum Beispiel eine mit max-width: 600px (sehr enge Bildschirme), eine mit 1000px, usw. Ich verwende es meistens nur, um Anpassungen für den Display auf Handys zu machen, man kann es aber auch verwenden, wenn man bestimmte Regeln für Ultra-Wide Bildschirme schreiben möchte. (Wäre dann zB. [...] and (min-width: 2000px) [...])
