Was ist Rem in CSS?

Der REM von CSS ist eine CSS-Einheit. Der vollständige englische Name von REM ist „Schriftgröße des Stammelements“, was sich auf die Einheit der Schriftgröße relativ zum Stammelement bezieht relativ zum übergeordneten Element.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer.

Empfehlung: „css-Video-Tutorial“

rem ist eine zurückhaltende CSS-Einheit, die in den letzten ein oder zwei Jahren auf dem Vormarsch ist. Einige versuchen, es zu verwenden Einige sind gerade dabei, es zu verwenden, als es auf eine Falle stieß. Meine Gesamteinschätzung von rem ist jedoch, dass es definitiv einer der am besten geeigneten Kandidaten für die Erstellung von Web-Apps ist.

rem was ist das?

rem (Schriftgröße des Stammelements) bezieht sich auf die Einheit der Schriftgröße relativ zum Stammelement. Einfach ausgedrückt handelt es sich um eine relative Einheit. Wenn Sie rem sehen, werden Sie definitiv an die Einheit em denken. Em (Schriftgröße des Elements) bezieht sich auf die Einheit der Schriftgröße relativ zum übergeordneten Element. Sie sind tatsächlich sehr ähnlich, mit der Ausnahme, dass eine Berechnungsregel für die Berechnung auf dem Stammelement und die andere auf dem übergeordneten Element basiert.

Warum verwenden Web-Apps rem?

Hier betone ich besonders, dass Web-Apps und Webseiten rem nicht verwenden können. Aus Kompatibilitätsgründen kann die Verwendung unter Web-Apps jedoch den Wert und die Funktionen dieser Einheit besser hervorheben . Wie implementieren einige Unternehmen derzeit die Bildschirmanpassung in ihren Web-Apps?

1. Erzielen Sie ein leistungsstarkes Bildschirmanpassungslayout:

Vor kurzem wurde das iPhone 6 mit zwei Mobiltelefongrößen veröffentlicht, was zu noch mehr Verwirrung bei den Arten von mobilen Bildschirmen geführt hat Vor ein oder zwei Jahren wird die Breite 320 verwendet. Um sich an den Standard anzupassen, werden Größen über 320 weiterhin in der Taobao-Web-App angezeigt. Die mobile Taobao-Homepage wurde jedoch kürzlich überarbeitet Die Homepage wurde immer noch übernommen und es gab die gleiche Verwirrung wie zuvor, mit Seiten mit fester Breite und Seiten mit fließendem Layout.

Die am häufigsten verwendete Einheit beim Zuschneiden von Seitenlayouts ist px, eine absolute Einheit. Es gibt viele Methoden für die Bildschirmanpassung von Web-Apps, wie zum Beispiel: flüssiges Layout, begrenzte Breite und Reaktionsfähigkeit. Ja, diese Optionen sind jedoch nicht vorhanden die beste Lösung.

Die Fluid-Layout-Lösung hat beispielsweise viele Nachteile, obwohl sie sich an verschiedene Bildschirme anpassen kann, ist der Anzeigeeffekt äußerst schlecht, da nur wenige Mobiltelefongrößen den visuellen Designer perfekt darstellen können und Interaktion der am meisten gewünschte Effekt ist. Aber es gibt immer noch einige Unternehmen in der Branche, die Streaming-Layout zum Schneiden von Web-Apps verwenden:

1 Die oben genannten Websites werden alle mithilfe der Fluid-Layout-Technologie implementiert. Sie definieren die Breite beim Layout der Seite, die Höhe wird jedoch größtenteils durch px festgelegt, sodass der Anzeigeeffekt auf Mobiltelefonen mit großem Bildschirm unterschiedlich ist Die Elemente wurden sehr lang gestreckt, aber die Höhe ist immer noch die gleiche wie zuvor. Das ist das schwerwiegendste Manko des flüssigen Layouts. Der Effekt ist oft zufriedenstellend. Tatsächlich sind viele visuelle Designer möglicherweise nicht in der Lage, diesen Effekt zu akzeptieren, da der Effekt ihrer Designzeichnungen bei der Betrachtung auf einem Mobiltelefon mit großem Bildschirm einer horizontalen Streckung gleichkommt.

Fluid-Layout ist nicht der idealste Weg, es zu implementieren, es kommt oft zu vielen Kompatibilitätsproblemen, da das Fluid-Layout zu Beginn berücksichtigt werden muss Beim Design können nur horizontal gestreckte Elementlayouts entworfen werden, und beim Design gibt es viele Einschränkungen.

2. Methode mit fester Breite

Es gibt eine andere Methode zur Festlegung der Seitenbreite. In der Anfangszeit stellten einige Websites die Seitenbreite auf 320 ein und ließen den überschüssigen Teil leer , und die Vision muss nicht fließend sein. Das traditionelle Layout schränkt Ihre Designinspiration ein und das Frontend muss sich nicht auf täuschende, fließende Layouts einlassen. Bei dieser Lösung gibt es jedoch einige Probleme. Beispielsweise gibt es auf Mobiltelefonen mit großem Bildschirm Leerzeichen auf beiden Seiten. Ein weiterer Grund ist, dass die Seite auf Mobiltelefonen mit großem Bildschirm sehr klein aussieht Die mobile Taobao-Homepage sah zunächst so aus, wurde aber kürzlich mit rem überarbeitet.

3. Responsiver Ansatz

Dieser Ansatz wird auf mobilen Endgeräten selten für komplexe Websites großer Unternehmen in China verwendet. Der Hauptgrund ist, dass der Aufwand groß und die Wartung schwierig ist, sodass er im Allgemeinen von kleinen und mittleren Portalen verwendet wird Blogseiten nutzen die Responsive-Methode, um in einem Schritt direkt von der Webseite zur Web-App zu wechseln, da dies Kosten sparen kann und die Notwendigkeit entfällt, eine Web-App-Version speziell für die eigene Website zu erstellen.

4.Darstellungsfenster für Zoom einstellen

Die Homepage der Tmall-Web-App ist auf diese Weise skaliert. Die maximale Skalierung beträgt 320*1,3 = 416. Grundsätzlich kann die Skalierung auf 416 mit dem Bildschirm des iPhone6 ​​plus kompatibel sein Die Methode ist einfach, grob und effizient. Ehrlich gesagt denke ich, dass es bei der Verwendung von REM sehr effizient ist, worüber wir als Nächstes sprechen werden. Einige Schüler berichteten jedoch, dass die Skalierung dazu führt, dass einige Seitenelemente während der Verwendung unscharf werden.

rem kann sich an alle Bildschirme gleichermaßen anpassen

Oben wurde über viele Web-App-Anpassungslösungen gesprochen, die derzeit in den meisten Unternehmen zum Mainstream gehören. Lassen Sie uns als Nächstes darüber sprechen, wie rem funktioniert.

Wie oben erwähnt, wird REM über das Root-Element in der Webseite angepasst. Wir können die Größe von REM steuern, indem wir die Schriftgröße von HTML festlegen. Zum Beispiel:

html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

Demo Die Schaltflächengröße des Ergebnisses des obigen Codes ist wie folgt:

Ich habe den HTML-Code auf 10 Pixel gesetzt, um unsere Berechnung zu erleichtern, weshalb 6rem gleich 60 Pixel ist. Wenn der Stil unserer .btn-Datei zu diesem Zeitpunkt unverändert bleibt, ändern wir den Schriftgrößenwert des HTML und sehen die oben genannten Änderungen in der Schaltfläche:

html{
    font-size:40px;
}

Die Ergebnisse der Schaltflächengröße sind wie folgt:

Die oben genannte Breite und Die Höhe wird zu den obigen Ergebnissen. Zweimal haben wir nur die Schriftgröße des HTML-Codes geändert, aber die Größe der Schaltfläche im Web wurde geändert, ohne die Eigenschaften der Breiten- und Höhen-REM-Einstellungen des .btn-Stils zu ändern.

Tatsächlich können wir aus den beiden oben genannten Fällen berechnen, wie viel rem 1 Pixel ist:

Erstes Beispiel:

120px = 6rem * 20px (legen Sie einen großen Wert für das Stammelement fest)

Zweites Beispiel:

240px = 6rem * 40px (der für das Stammelement festgelegte Maximalwert)

wird abgeleitet:

10px  = 1rem 在根元素（font-size = 10px的时候）；
20px  = 1rem 在根元素（font-size = 20px的时候）；
40px  = 1rem 在根元素（font-size = 40px的时候）；

In den beiden obigen Beispielen haben wir festgestellt, dass die erste Groß-/Kleinschreibungsschaltfläche im gleichen Verhältnis zur zweiten Schaltfläche vergrößert wird und sich der HTML-Code ändert Die Schriftgröße führt dazu, dass wir die zuvor für die Schaltfläche festgelegte Breite und Höhe nicht ändern müssen. Tatsächlich ist es das, was wir am meisten sehen möchten. Schauen wir uns als Nächstes ein Beispiel an:

Aus den beiden obigen Demos wissen wir, dass durch Ändern der Schriftgröße von HTML alle Elemente mit REM-Einheiten gleichermaßen geändert werden können. Sie können also das Debugging-Tool des Chrome-Browsers verwenden, um die Anzeige zu ändern Wenn wir die Auswirkungen der drei Demos auf verschiedene Geräte betrachten oder die Breite des Browsers vergrößern, können wir sehen, dass das Layout der Seite unabhängig von der Auflösung in gleichen Proportionen geändert wird und das Layout nicht chaotisch ist. Ich habe den oben genannten Effekt einfach dadurch erreicht, dass ich den Schriftgrößenwert über ein Stück js entsprechend der aktuellen Auflösung des Browsers geändert habe. Alle Elemente der Seite mussten in keiner Weise geändert werden.

Hier fragen mich sicher viele Leute, wie man die Schriftgrößenwerte bei verschiedenen Auflösungen berechnet?

Schauen wir uns zunächst einmal den Entwurf des Seitendesigns oben an, vorausgesetzt, dass er mir in der Standardgröße 640 zur Verfügung gestellt wurde (diese Größe ist natürlich nicht unbedingt 640, es kann auch 320 sein, oder 480, oder 375).

Die blaue Spalte in der obigen Tabelle gibt die Größe der Seite in Demo3 an. Die Seite ist mit einer Breite von 640 geschnitten. Wie berechnet man den Font-Site-Wert bei verschiedenen Breiten? die numerischen Änderungen in der Tabelle. Beispiel: 384/640 = 0,6, 384 ist das 0,6-fache von 640, daher entspricht die Schriftgröße unter der Seitenbreite von 384 ebenfalls dem 0,6-fachen davon. Zu diesem Zeitpunkt entspricht die Schriftgröße von 384 12 Pixel . Die Breite verschiedener Geräte wird auf die gleiche Weise berechnet.

In Demo3 habe ich JS verwendet, um die Schriftgröße des Stammelements dynamisch zu berechnen. Der Vorteil davon ist, dass alle Geräteauflösungen kompatibel sind und derzeit JS zur Berechnung verwenden. Aber tatsächlich können wir Anpassungen ohne JS durchführen. Wenn wir Web-Apps erstellen, zählen wir im Allgemeinen zuerst die Mainstream-Bildschirmgeräte unserer Website und legen dann die Medienabfrage für diese Geräte fest, um beispielsweise eine Anpassung zu erreichen :

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

Natürlich können die oben vorgenommenen Einstellungen nicht vollständig an alle Geräte angepasst werden, eine vollständige Anpassung kann jedoch mithilfe von JS erreicht werden. Welche Sie verwenden sollten, hängt von Ihrem tatsächlichen Arbeitsszenario ab.

Nachfolgend empfehlen wir zwei inländische mobile Websites, die rem-Technologie verwenden. Sie können sich auf diese beziehen, um ihre Praktiken zu sehen. Derzeit verwendet nur die Homepage der mobilen Taobao-App rem, und die Homepage der nativen Taobao-App ist eine eingebettete Web-App-Homepage.

Taobao-Homepage: m.taobao.com

D X: m.dx.com

Das obige ist der detaillierte Inhalt vonWas ist Rem in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!