Share
Auf der CSSConf 2014 in Australien präsentierte Simurai eine wirklich erstaunliche Präsentation mit dem Namen "Styling with Strings", in der er einige Techniken zur Entwicklung von In-Browsern durchführte. Der einzige Tipp, der mir wirklich auffiel, war folgender: UI-Komponenten mit EMs auffüllen, mit REMs einen Freiraum schaffen. Oder als Faustregel: EMs für Polsterung, REMs für Marge.
Der Grund, warum dies so interessant ist, liegt darin, dass wir dadurch unsere gesamten Websites durch ein paar Änderungen vergrößern und verkleinern können Schriftgröße Eigenschaften.
Möchten Sie, dass Ihre UI-Komponenten alle etwas größer sind? Bump your body font-size: 13px; bis zu 15px. Möchten Sie etwas mehr Leerzeichen zwischen diese Komponenten setzen? Bump your html font-size: 15px; bis zu 17px.
Beobachten Sie, wie der Leerraum zwischen diesen Schaltflächen zunimmt, wenn ich das HTML-Element wähle Schriftgröße (und damit die globale Polsterung) nach oben. Die Auffüllung der Tasten bleibt fest eingestellt auf Polsterung: 1em 3em.
In diesem Beispiel wähle ich die Schriftgröße auf dem Körperelement. Wie Sie sehen, wächst alles mit Ausnahme der Ränder zwischen den Elementen proportional.
Dies ist eine sehr schnelle, aber leistungsfähige Methode zur Erstellung flexibler Layouts. Spielen Sie selbst mit der Demo:
Accentsconagua