Responsive Dimensionen mit em

Question

Heute kam eine Idee auf und ich möchte die Meinungen anderer Leute kennenlernen, bevor ich anfange, sie zu benutzen. Was sind die Vor- und Nachteile für die Verwendung von em für fast alle Eigenschaften (paddings, font-size, width, height ...) und Steuern auf Blockebene durch Festlegen einer Schriftgröße auf ihrem nächsten Elternteil? Ich habe unten ein Beispiel angefügt. Vielen Dank.

.steps { 
 
    border: 1px solid #000; 
 
    font-size: 16px; 
 
} 
 

 
.steps__item { 
 
    display: inline-block; 
 
    height: 6.375em; 
 
    min-width: 8.4375em; 
 
    margin: 0.375em 1.4375em; 
 
    position: relative; 
 
    text-align: center; 
 
    border: 3px solid transparent; 
 
} 
 
.steps__item--selected { 
 
    border-color: #70b631; 
 
} 
 
.steps__item:hover { 
 
    border-color: #70b631; 
 
} 
 
.steps__wrapper { 
 
    display: inline-block; 
 
    position: relative; 
 
    top: 50%; 
 
    -moz-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    -webkit-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    
 
    
 
} 
 

 
.steps__wrapper img { 
 
    width:3.75em; 
 
    } 
 

 
.steps__description { 
 
    display: block; 
 
    font-size: 0.8125em; 
 
    font-weight: 600; 
 
    color: #000; 
 
    padding: 0.625em 0.625em 0 0.625em; 
 
}

<section class="steps"> 
 
    <a href="javascript:void(0)" class="steps__item steps__item--selected "> 
 
    <div class="steps__wrapper"> 
 
     <img src="https://dummyimage.com/60x45/ad6bad/fff&text=+" alt=""> 
 
     <span class="steps__description">1. Produkt hinzufügen</span> 
 
    </div> 
 
    <!-- end steps__wrapper --> 
 
    </a> 
 
    <!-- end steps__item --> 
 

 
    <a href="javascript:void(0)" class="steps__item "> 
 
    <div class="steps__wrapper"> 
 
     <img src="https://dummyimage.com/60x45/ad6bad/fff&text=+" alt="tshirt image"> 
 
     <span class="steps__description">2. Druck hinzufügen</span> 
 
    </div> 
 
    <!-- end steps__wrapper --> 
 
    </a> 
 
    <!-- end steps__item --> 
 

 
    <a href="javascript:void(0)" class="steps__item"> 
 
    <div class="steps__wrapper"> 
 
     <img src="https://dummyimage.com/60x45/ad6bad/fff&text=+" alt="email icon"> 
 
     <span class="steps__description">3. Gratis Angebot direkt erhalten</span> 
 
    </div> 
 
    <!-- end steps__wrapper --> 
 
    </a> 
 
    <!-- end steps__item --> 
 
</section> 
 
<!-- end steps -->

Answer 1

Dies ist der absolut falsche Ansatz für die Wahl einer Einheit. Jede Einheit ist aus einem bestimmten Grund hergestellt: em/rem sind abhängig von den Benutzereinstellungen, vh/vw sind relativ zur Größe des Darstellungsbereichs und so weiter. Die Vereinheitlichung der verwendeten Einheit ist nicht sinnvoll, da Sie die für die jeweilige Einstellung am besten geeignete Einheit auswählen sollten. Es ist also eine gute Idee, em/rem für Schriftgrößen zu verwenden, aber es ist nicht zum Einrichten eines Containers, der zwei Drittel so breit sein sollte wie seine Eltern. Daher sind Prozentsätze gut. Responsive Design wird nicht aus einer bestimmten Einheit gemacht, sondern aus Design und einem guten Konzept, wie die Dinge auf verschiedenen Größen sein sollten. Wenn Sie das in die Realität umsetzen, müssen Sie entscheiden, welche Einheit Sie verwenden wollen, es gibt keine »Eins für alle Wahrheit«.

UPDATE

Es ist wohl erwähnenswert, wie ich dazu kam, ist: ich einmal, als ich rem zuerst entdeckt hatte, begann mit einer sass Funktion aus jeder und alles zu rem konvertieren, also musste ich eine px2em($px) Methode und konvertiert damit jeden möglichen Wert. Da es nicht zu viele Anforderungen gab, die mit Prozentsätzen gelöst werden sollten, wurde das Ganze gut. Aber ich kam über mehrere Probleme, die es unnötig kompliziert, sogar nutzlos machten. Ein großes Problem war mit Rundungsfragen verbunden, wenn es um Haarlinienränder ging: Angenommen, dass 1em gleich 16px ist (wenn der Benutzer dies nicht geändert hat), wird ein Rand mit der Breite 1px0,0625rem, was wiederum zu variierenden gerenderten Breiten zwischen Browsern führte. Zurückschalten auf px gerade gelöst, dass. Abschließend erhielt ich ein Layout, das an rem gebunden war, was eine feste Einheit in Bezug auf eine bestimmte Basis ist, so dass das Ändern der Basis nichts anderes als Skalierung ergab. Nachdem ich alle Umwege gemacht hatte, endete ich mit einer nicht reagierenden Seite, die skaliert werden konnte, indem man die Standardschriftgröße änderte, anstatt einfach ctrl+ oder ihr Touch-Gesten-Pendant zu verwenden.

Auf den Punkt gebracht: Einheiten sind Werkzeuge in Ihrer Toolbox und das Ablehnen eines bestimmten Werkzeugs, oder die Bevorzugung eines Werkzeugs gegenüber dem anderen, ist ebenso hilfreich wie die Verwendung eines Hammers auf Schrauben. Auch wenn das möglich ist, ist es sinnvoller, einen Schraubenzieher zu verwenden, wenn dieser verfügbar ist.

Answer 2

Sie absolut em für alle Größen verwenden sollten ein voll Responsive Design zu haben.

Natürlich gibt es einige Ausnahmen, bei denen Sie eine feste Pixel- oder prozentuale Größe benötigen. Lassen Sie sich also etwas Platz, um flexibel zu sein.

Vergessen Sie nicht, dass es auch die rem Einheit gibt, die von der Standard-Stammschriftgröße auf der Seite (normalerweise 16px standardmäßig) entfernt ist, anstelle des übergeordneten Elements. Manchmal möchten Sie das verwenden, wenn Sie verschachtelte Blöcke haben - die Schriftgröße kann schnell von Ihnen abkommen und sehr groß oder sehr klein werden.