Responsives CSS-Design lernen – 1
Programmierer mögen kein GUI-Design (Graphic User Interface). Daher ist das CSS (Cascade Style Sheet) nicht ihr Ding. Ich wusste schon immer, dass es Anzeigeprobleme auf Smartphones/Geräten gibt, bei denen die Breite des Bildschirms (Browser) klein und schmal ist. Dieser Blog war zuvor in einem totalen Durcheinander, als ich ihn auf meinem Samsung Gallery S3-Smartphone ansah.
Das liegt daran, dass ich eine Vorlage gewählt habe, die am besten für Desktops mit breiteren Bildschirmen geeignet ist. Ich hatte keine Zeit und wollte es nicht ändern, bis ich die Besuchsstatistiken in Google Analytics sah. Anscheinend wächst die Zahl für Besucher, die von Smartphones/Geräten kommen, erheblich.
Das WordPress oder vielleicht das Theme-Upgrade hat sich stark verbessert. Wenn Sie nun die Breite des Browsers verringern, um die Smartphones zu simulieren, können Sie sehen, dass die Seite nicht ganz schlecht ist, aber sie ist auch nicht perfekt und erfordert manuelle Anpassungen.
Was ist also ein responsives CSS? Das Wort responsiv bedeutet meiner Meinung nach, dass das CSS an unterschiedliche Situationen angepasst wird (z. B. Breite des Bildschirms). Haben Sie bemerkt, dass sich in der linken oberen Ecke dieser Seite eine vertikale Symbolleiste befindet? In breiterer Breite sieht es gut aus, aber in schmaler Breite wird dies mit dem Hauptinhalt zusammenbrechen und es zu einer wirklich hässlichen Benutzererfahrung machen. Ich beschließe, dies auszublenden, wenn die Bildschirmbreite klein ist.
Das Folgende ist also ein schneller Ausgangspunkt für responsives CSS.
Grundsätzlich definiert das obige CSS die Klasse oben links, und die zweite Zeile prüft, ob die Breite der aktuellen Seite (Browser, Bildschirm) größer als 1100 Pixel ist. Wenn nicht, wird oben links als ausgeblendet neu definiert.
Um es zu verwenden, fügen Sie es einfach so ein …
Jetzt müssen Sie die Seite nicht einmal mehr aktualisieren, das CSS reagiert sofort, wenn die Bildschirmbreite unter 1100 Pixel fällt. Wenn Sie beispielsweise auf dem iPad anzeigen und sich um 90 Grad vom Querformat ins Vertikale drehen, reagiert der CSS-Code und die Symbole werden ausgeblendet.