#032: Das Raster responsiv machen

Wir beginnen damit, mit unserem Blog-Post-Modul zu spielen und mit dem Abstand zu experimentieren. Wir fügen auch das kleine farbige Quadrat in der oberen linken Ecke des Moduls hinzu, ein visuelles Signal für die Art des Inhalts.

Die nächste Änderung, die wir vornehmen, ist die Verringerung einiger äußerer Lücken bei schmaleren Bildschirmgrößen. Auf breiten Bildschirmen ist der Inhalt 80% breit (10% Randbreite), aber es fühlt sich besser an, bei kleineren Bildschirmen eher 90% zu verwenden (5% Randbreite).

Wir fügen einen kleinen Übergang hinzu, wenn diese Media Query greift, was ein wirklich lustiger Designer-Trick sein kann. Ich mag ihn in diesem Video, aber letztendlich wurde er aus dem Design entfernt. Er kann bei viel mehr Inhalt auf der Seite ruckelig und eher ablenkend werden.

Wir ändern unser Rastersystem, um einen Breakpoint bei der kleinsten Größe zu haben. Es ist super einfach, wir hören einfach auf, die Spalten zu quoten, und machen sie width: 100%; Yay fürs Nicht-Überdenken von Rastern! Auf dem Weg dorthin kämpfen wir mit einigen Spezifitätsproblemen.

Wir öffnen den echten iOS-Simulator, um das Raster auf einem „echten“ Mobilgerät zu sehen. Wir kämpfen ein wenig damit, das richtige Meta-Tag zu finden, aber letztendlich holen wir uns das richtige von CSS-Tricks.com. Es funktioniert! Aber natürlich haben wir einige Positionierungsprobleme, an denen wir arbeiten müssen. Zur Erinnerung, dieses Meta-Tag ist

<meta name="viewport" content="width=device-width">

Wir tüfteln und tüfteln an Abständen und Größen herum, bis alles gut aussieht. Am Ende sieht alles ziemlich schön responsiv aus!