Nutzen Sie diese Tipps, um responsive Layouts effizient zu erstellen.

Stellen Sie sich vor, Sie hätten die ganze harte Arbeit geleistet, um ein wirklich cooles Layout zu erstellen. Aber wenn Sie dann Ihr Browserfenster ein wenig verkleinern, stellen Sie fest, dass etwas überläuft. Sie führen eine Medienabfrage ein, um das Problem zu beheben. Aber wenn Sie die Größe des Fensters ändern, bemerken Sie, dass etwas anderes kaputt ist.

Dies ist etwas, was die meisten CSS-Entwickler irgendwann erleben werden. Aber zum Glück verfügen wir über mehrere moderne CSS-Lösungen, die es viel einfacher machen, Dinge einfach zu entwickeln und zum Laufen zu bringen. In diesem Artikel werden fünf nützliche Vorgehensweisen erläutert, die Sie bei der Entwicklung von Websites beachten sollten. Diese Tipps helfen Ihnen, störende Brüche in Ihrem Design zu vermeiden.

1. Beginnen Sie mit einem globalen Stylesheet

Beginnen Sie beim Schreiben von CSS immer mit dem globalen Stil. Machen Sie sich keine Sorgen um das Layout. Legen Sie stattdessen generische Stile wie Typografie, Farben und Hintergründe fest. Ränder zurücksetzen, Unterstreichungen von Links entfernen usw.

instagram viewer

Nachdem Sie mit dem allgemeinen Stil fertig sind, können Sie mit der Erstellung des Layouts und der Ausrichtung auf einzelne Elemente innerhalb des Layouts beginnen. Beginnen Sie grundsätzlich von oben und gehen Sie dann auf die Elemente ein.

Das folgende CSS-Beispiel setzt den Rand aller Elemente auf 0 zurück, definiert die Typografie und Farbe aller Hauptüberschriften und fügt allen einen einheitlichen Rand hinzu:

Körper,
h1,
h2,
h3,
P {
Rand: 0;
}
h1,
h2,
h3 {
Farbe: Blau;
Schriftfamilie: "Verdana" serifenlos;
Schriftstärke: 900;
Zeilenhöhe: 1;
}
h2,
h3,
P {
Rand unten: 1rem;
}

Nachdem Sie nun alle Basisstile definiert haben, können Sie von dort aus erstellen. Beispielsweise können Sie dem Containerelement eine Polsterung hinzufügen. Dadurch wird der Inhalt von den Rändern Ihres Browsers weggeschoben. Dann können Sie einen Antrag stellen maximale Breite zu Bildern, sodass sie sich an die Breite ihres Containers anpassen können. Es geht darum, mit den allgemeinen Elementen zu beginnen, bevor man sich auf spezifische Elemente konzentriert.

Auch hier wird das Layout responsive sein. Wenn Sie also die Bildschirmgröße ändern, ändert sich die Größe der Elemente entsprechend. Als Entwickler sollten Sie diese CSS-Tipps und Tricks kennen denn sie können Ihre Produktivität auf die nächste Stufe heben.

2. Vermeiden Sie feste Größen

Wenn Sie anfangen, über Layouts nachzudenken, sollten Sie als Erstes daran denken, feste Größen zu vermeiden. Feste Größen beziehen sich auf Eigenschaften wie Breite: 1000px, Höhe: 200px, usw. Das Festlegen einer festen Höhe oder Breite wird Ihnen auf lange Sicht nur Probleme bereiten.

Nutzen Sie stattdessen anpassbare Höhen und Breiten. Eine Möglichkeit ist die Verwendung Mindesthöhe Und Mindestbreite anstatt Höhe Und Breite. Angenommen, Sie legen die Breite eines Elements auf 600 Pixel fest. Wenn Sie kleiner als 600 Pixel werden, läuft der Inhalt über:

Stattdessen sollten Sie die Eigenschaft von ändern Breite Zu maximale Breite. Mit maximale Breite, kann das Element verkleinert werden, wenn das Browserfenster kleiner wird. Und wenn das Fenster breiter wird, wird der Text wieder auf seine ursprüngliche Länge erweitert. Hier ist das Ergebnis:

Dies gilt auch für Höhe. Angenommen, Sie legen Folgendes fest: Höhe eines Headers auf einen festen Wert von 200px.

Header {
Höhe: 200px;
Anzeige: Netz;
Ortsgegenstände: Center;
}

Dadurch wird alles im Header perfekt zentriert. Wenn Sie jedoch das Browserfenster verkleinern, fließt der Inhalt irgendwann aus seinem Container. Und das liegt daran, dass Sie für die Kopfzeile eine feste Höhe festlegen.

Allgemein, Höhe Und Breite sind beides gefährliche Eigenschaften. Die Lösung besteht darin, die anpassbaren Höhen und Breiten zu verwenden, d. h. Mindest- Und maximale Höhe, Und Mindest- Und maximale Breite. Wenn der Browser in diesen Fällen in Situationen gerät, in denen der Inhalt länger wird, wird der Header größer, um sich daran anzupassen.

Dies ist einer der Die häufigsten CSS-Fehler, die Sie vermeiden sollten.

3. Denken Sie daran, dass Ihre Website standardmäßig responsiv ist

Bedenken Sie, dass Ihre Website responsive ist, noch bevor Sie eine einzige Zeile CSS-Code schreiben. Diese Denkweise kann Ihnen helfen, eine Überkomplizierung des Designprozesses zu vermeiden. Das Layout funktioniert auf großen und kleinen Bildschirmen. Es könnte nicht schön sein. Es könnte sogar schwierig sein, es auf großen Bildschirmen zu lesen. Die Website passt sich jedoch unabhängig von ihrer Größe dem Darstellungsfenster an.

Natürlich können die Bilder überlaufen und der Text könnte zu klein sein. Mit dem Standardlayout werden Sie jedoch nichts verlieren. Ihr Text wird nicht unterbrochen und alle Elemente werden auf dem Bildschirm sichtbar sein.

Das Verstehen und Annehmen dieser Tatsache kann beim Schreiben Ihres CSS-Codes wirklich hilfreich sein. Wenn Sie auf Probleme stoßen, können Sie sicher sein, dass der Fehler auf das von Ihnen geschriebene CSS zurückzuführen ist. Dies erleichtert das Auffinden und Beheben des Problems.

Versuchen Sie, Medienabfragen nur zu verwenden, um die Komplexität zu erhöhen. Wenn Ihr Layout beispielsweise auf größeren Bildschirmen dreispaltig sein soll. Andernfalls verwenden Sie sie nicht. Für einen tieferen Einblick in Medienanfragen lesen Sie unsere Leitfaden für Medienabfragen.

Hier ist ein Szenario. Stellen Sie sich vor, dass das Element mit dem Klassennamen .Teilt enthält drei Elemente. Mit folgendem CSS wird ein dreispaltiges Layout erstellt:

.Teilt {
Anzeige: biegen;
Flex-Richtung: Reihe;
Lücke: 2rem;
}

Auf kleineren Bildschirmen (40em breit oder kleiner), möchten Sie, dass alles eine einzige Spalte einnimmt. Sie würden also Folgendes tun:

@Medien(maximale Breite: 40em) {
.Teilt {
Anzeige: Block;
 }
}

Hier überschreiben Sie die Standardausrichtung (drei Spalten). Die Medienabfrage ist jedoch nicht erforderlich, da der Browser verwendet wird Bildschirmsperre standardmäßig. Sie müssen es also nicht explizit definieren.

Vor diesem Hintergrund könnten Sie Ihren Code umgestalten, um eine einzige Medienabfrage zu verwenden, die nur für große Bildschirme gilt. Dort wechseln Sie zu drei Spalten, wenn der Bildschirm breiter als 40 cm ist:

@Medien(maximale Breite: 40em) {
.Teilt {
Anzeige: biegen;
Flex-Richtung: Reihe;
Lücke: 2rem;
 }
}

Auf kleinen Bildschirmen stapelt der Browser alles in einer einzigen Spalte. Sie müssen es jedoch nicht angeben, da der Browser dies verwendet Bildschirmsperre standardmäßig. Daher haben Sie Medienabfragen nur verwendet, um die Komplexität zu erhöhen.

Anstatt also die Komplexität hinzuzufügen und dann eine Reihe von Eigenschaften überschreiben zu müssen, fügen Sie die Komplexität jetzt hinzu, wenn Sie sie benötigen. Meistens brauchen Sie nur Mindestbreite Medien-Anfragen. Beginnen Sie zunächst mit Mobilgeräten. Wenn die Website dann auf Mobilgeräten gut aussieht, fügen Sie die Komplexität (z. B. Spalten) für die Desktop-Version hinzu.

5. Profitieren Sie von modernem CSS

Mithilfe moderner CSS-Ansätze können Sie die meisten Ausrichtungsprobleme und Haltepunkte umgehen und zu einem intrinsischen Design übergehen.

Eine Möglichkeit, dies zu tun, ist:

h1 {Schriftgröße: Klemme (3rem, 1rem + 10vw, 7rem)}

Dies klemmt die h1 zwischen einer minimalen und maximalen Schriftgröße. Das Kleinste, zu dem es gehen soll, ist 3rem und das Höchste ist 7rem. Die Mitte ist das, worüber wir iterieren werden (1rem + 10 vw). Dadurch wird der Titel automatisch kleiner, wenn das Ansichtsfenster kleiner wird, und wächst, wenn es größer wird.

Erfahren Sie mehr über modernes CSS

CSS hat sich im Laufe der Jahre stark weiterentwickelt. Heute verfügen wir über neuere und bessere Ansätze zur Positionierung von Elementen in CSS. In diesem Artikel haben wir einige dieser Praktiken angesprochen und hervorgehoben, wie sie Ihnen dabei helfen können, häufige Design-Fallstricke zu vermeiden. Eine der besten Möglichkeiten, modernes CSS zu erlernen, ist der praktische Ansatz, beispielsweise die Verwendung von modernem CSS zum Entwerfen einer HTML-Tabelle.