Responsive Design erfordert häufig die Einstellung Ihrer Breite mit Prozentwerten. Dies ist leicht genug zu bewerkstelligen, bis Sie anfangen, Grenzen in die Mischung zu werfen. Wenn Ihre Spalten und die Gesamtbreite mit Prozentwerten festgelegt werden, führt dies zu einer statischen Rahmengröße.
Heute werden wir uns verschiedene Möglichkeiten anschauen, um dieses Problem zu lösen. Sie werden lernen, wie Sie ein völlig fließendes Layout erstellen, das sich nicht an zusätzlichen Rändern oder einem Auffüllen von Füllungen interessiert.
Responsive Design ist einfach? In der Theorie
Responsive Design ist derzeit die beste Lösung, um optimierte Inhalte für die Fülle verschiedener Geräte und Bildschirmgrößen bereitzustellen, die heute auf das Internet zugreifen. Mit ein paar grundlegenden Medienabfragen können wir schnell und einfach ein statisches Design erstellen und in etwas verwandeln, das sich je nach den individuellen Bedürfnissen des Benutzers entwickelt. Wie toll ist das?
? Die Codierung der realen Welt hat einen Weg, Sie zu überraschen?Theoretisch sieht das für mich nett und einfach aus. Ich habe viel Zeit damit verbracht, über responsives Design zu lesen und zu schreiben, daher kenne ich sowohl die Theorie als auch die Praktiken gut genug, sodass ich niemals auf größere Hürden stoßen sollte. Die Codierung der realen Welt kann Sie jedoch überraschen. Egal wie bereit Sie sind zu denken, wenn es Zeit ist, Ihr Projekt tatsächlich zum Leben zu erwecken, werden sich einige große Hürden stellen müssen. Besonders, wenn Sie sich in CSS mit komplexen Layouts befassen.
Es gibt eine Million Probleme, die in solchen Situationen auftauchen, aber heute möchte ich mich auf eine konzentrieren, die mir speziell einen Kurvenball geworfen hat: Grenzen. Wenn Sie responsive Layouts entwerfen, können diese scheinbar unschuldigen Berührungen alles zerstören!
Responsive Math
Bei der Codierung einer vollständigen Site auf einer responsiven Site wird empfohlen, prozentuale Breiten für Ihren Inhalt zu verwenden. Sicher, Sie können Medienabfragen mit statischen Breiten kombinieren, aber dann ist Ihr Layout bei weitem nicht so anpassungsfähig wie es sein könnte. Wenn dies das ultimative Ziel ist, warum nicht den ganzen Weg gehen?
Die Kombination mehrerer Spaltenlayouts mit prozentualen Breiten erfordert ein wenig Mathematik, aber sie ist wirklich einfach und kann von jedem Benutzer mit grundlegenden Additions- und Multiplikationsfähigkeiten gehandhabt werden.
Nehmen wir an, wir möchten ein Layout mit fünf Spalten. Als Erstes denke ich an Margen. Wenn wir 4% Margen zwischen unseren Spalten wünschen, entsprechen 4% mal 5 Spalten 20% unserer Breite, die für Margen reserviert ist. Dann ziehen wir 20% von der Gesamtbreite (100%) ab, wobei 80% für die eigentlichen Spalten übrig bleiben. 80% geteilt durch fünf Spalten entsprechen einer Breite von 16% für jede Spalte. Hier ist eine Grafik, um alles etwas klarer zu machen:
Wenn Sie diese Mathematik in unserem CSS sinnvoll einsetzen, sieht das in etwa wie folgt aus. Ganz einfach richtig?
Das Grenzproblem
Nicht so schnell. Nehmen wir an, wir möchten unserem Design eine Grenze hinzufügen. Wie machen wir das? Normalerweise fügen wir der Spaltenklasse einfach einen Rahmen hinzu, aber im obigen Layout haben wir bereits 100% der Breite berücksichtigt. Das Hinzufügen von Rahmen vervollständigt unser Layout. Hier haben wir fünf über das CSS verteilte Spalten:
Und das passiert, wenn wir einer Spalte einen Rahmen von etwa 2px hinzufügen:
Die Lösung wäre natürlich, die Grenze in unserer vorherigen Mathematik zu berücksichtigen, aber wie gehen wir das an? Es stellt sich heraus, dass wir die Rahmengröße nicht als Prozentwert festlegen können, sondern nur als statischen Wert. Dies ist problematisch, da, wenn wir für alles andere Prozente verwenden, der für den Rahmen verbleibende Speicherplatz einen unterschiedlichen Wert hat, dh er ändert sich, wenn sich die Seitenbreite ändert. Dies macht es fast unmöglich, sich für eine Breite für unsere Grenzen zu entscheiden! Also, was machen wir? Sollten wir auf die Grenzidee verzichten?
CSS-Übersicht zur Rettung
Offensichtlich brauchen wir eine Möglichkeit, einen Rand an einer Säule anzubringen, ohne die Breite zu verschrauben. Wie jeder gute CSS-Trickster weiß, gibt es tatsächlich eine Eigenschaft, die genau das tut: Gliederung. Mit dem folgenden Code können wir unsere Mathematik genau so belassen, wie wir sie uns vorgestellt haben, und trotzdem einen randähnlichen Effekt hinterlassen, der unser Layout nicht beeinträchtigt.
Das funktioniert prima für unseren Test, die Säulen fließen gut und passen trotz der Umrisse perfekt in den vorgesehenen Raum:
Kopfschmerzen
Wir haben unsere Lösung gefunden, lassen Sie uns auf den Rücken klopfen und nennen Sie uns einen Tag! Leider gibt es immer einen Vorbehalt. In diesem Fall gibt es mehrere.
Browser-Kompatibilität
Das erste Problem, das bei der Verwendung der CSS-Gliederungseigenschaft auftritt, ist natürlich die Browserkompatibilität. Fairerweise könnte die Situation hier schlimmer sein. Wir haben großartige Unterstützung in modernen Browsern: Safari, Chrome, Opera und sogar IE! Leider geht die IE-Unterstützung nur auf IE8 zurück, wobei IE6 und 7 keine Unterstützung haben.
Viele Entwickler haben erst vor kurzem beschlossen, dass sie die Unterstützung für IE6 ausrotten können. Ich weiß, dass viele nicht bereit sind, das gleiche für IE7 zu tun. Die gute Nachricht ist jedoch, dass dies eine subtile Ästhetik ist und meinen Tag definitiv nicht ruinieren wird, wenn alle die Umrisse außer IE7-Benutzern sehen.
Firefox Box-Shadow-Problem
Obwohl Firefox die CSS-Gliederungseigenschaft vollständig unterstützt, müssen Sie sehr vorsichtig sein, wie Sie sie verwenden. Insbesondere treten Probleme auf, wenn Sie eine Kontur mit einem Box-Schatten kombinieren. Um zu verstehen, was ich damit meine, hier ein Umriss und ein in Safari gerenderter Boxschatten (der gute Weg):
Hier ist genau der gleiche Code, der in Firefox gerendert wurde (die verworrene Art):
Wie Sie sehen, platziert Firefox die Umrisse aus irgendeinem verrückten Grund außerhalb des Schattens und nicht am rechten Rand unserer Kolumne. Dies führt zu inakzeptabler Hässlichkeit!
Alles oder nichts
Eine letzte Sache, die Sie bei CSS-Konturen beachten sollten: Sie können sie nicht selektiv anwenden. Mit Rändern können Sie Border-Right, Border-Top usw. verwenden, aber mit einer Gliederung müssen Sie die Annahme akzeptieren, dass die gesamte Kante des Objekts einheitlich ist.
Eine andere Lösung: Box-Sizing
Die CSS-Übersicht enthält viel Gepäck! Es löst unser Problem, bringt aber eine Reihe von Anweisungen mit, die Sie vielleicht nicht interessieren. Wenn es nur eine Möglichkeit gibt, die weit übergeordnete Border-Eigenschaft zu verwenden, das CSS-Box-Modell jedoch an unsere eigenen Geräte anzupassen. Nun, Sie haben Glück, denn es gibt tatsächlich eine solche Eigenschaft: Box-Sizing.
Diese magische Eigenschaft ermöglicht es uns, das immer verwirrendere Boxmodell zu optimieren. Der Standardwert für die Größenanpassung von Boxen ist "content-box". Dies ist im Wesentlichen das Boxmodell, das wir kennen und lieben. Die Werte für Breite und Höhe bestimmen die Größe des Inhalts. Alle Auffüllungen oder Ränder werden außerhalb davon gezeichnet und erhöhen daher die Breite. Ein 200px breites Div mit einem 2px-Rand frisst also technisch 204px Platz.
Border-Box
Der andere mögliche Wert für die Box-Dimensionierung ist "border-box", bei dem alle Auffüllungen und Ränder innerhalb der angegebenen Höhe und Breite platziert werden. Dies bedeutet, dass ein 200px breites Div mit einem 2px-Rand nur noch 200px ist! So sieht das aus, wenn wir es auf unsere Spalten anwenden:
Mit diesem Code fließen unsere Spalten trotz der angewendeten Ränder perfekt.
Wir können sogar noch einen Schritt weiter gehen und der Gleichung etwas Polster hinzufügen, ohne etwas zu vermasseln. Solange Sie die Box-Sizing-Eigenschaft auf border-box setzen, ist keine zusätzliche Berechnung erforderlich. Fügen Sie alle Ränder und Füllungen hinzu, die Ihnen gefallen und alles funktioniert noch:
Browser-Kompatibilität
Interessanterweise ist die Browserkompatibilität hier dieselbe wie bei Gliederung, was bedeutet, dass dies auf fast alles außer IE6 und IE7 funktioniert. Ihre Hauptsorge ist hier jedoch, dass das Layout im Gegensatz zu Outline in Browsern fehlschlägt, die diese Eigenschaft nicht unterstützen.
Welche Methode ist am besten?
Die Gliederungseigenschaft ist definitiv die einfachere Lösung. Sie funktioniert in vielen Situationen, und wenn sie fehlschlägt, passiert Ihrem Layout nichts Schlimmes. Ich denke jedoch, dass sich die Box-Sizing-Methode so viel besser anfühlt. Ich kann es mit einem Schatten kombinieren, ohne ernsthafte Probleme zu haben. Die Browserunterstützung ist eigentlich nicht schlecht und ich kann trotzdem die ganze Güte der Grenzen genießen. Die Tatsache, dass Polsterung auch in den Mix hineingeworfen werden kann, ist ein Sahnehäubchen und bringt mir die Konkurrenz auf diese Weise voran. Wenn Sie sich um IE7 Sorgen machen, können Sie jederzeit ein schnelles bedingtes Stylesheet erstellen, das das Problem löst.
Demo
Wenn Sie Box-Sizing in Aktion sehen möchten, navigieren Sie zu Dabblet, um die Live-Demo des obigen Beispiels zu sehen.
Fazit
Outline und Box-Sizing stellen zwei mögliche Lösungen für unser Problem dar, Rahmen in Prozent-Breiten in CSS-Layouts zu kombinieren. Keine der Lösungen ist perfekt, aber solange Sie wissen, was Sie tun, können beide verwendet werden, um Ihre Layoutprobleme erfolgreich zu lösen.
Nun, da Sie meine Lösungen für dieses Problem gesehen haben, ist es Zeit für Sie, sich einzumischen. Wie gehen Sie mit dem Problem der Grenzen in responsiven Layouts um? Haben Sie eine andere Lösung, die oben nicht aufgeführt ist?