Analyse des Problems, dass die Breite und Höhe von rem nicht wirksam werden

Viele Frontends verwenden jetzt rem zur Einheit von Element und Schriftgröße

Die allgemeine Einstellung ist

html{

font-size:62.5%

}

Konvertierungsquelle 1rem = 16px

10/16 = 0,625

10px entspricht also 1rem

1,4rem = 14px (Dies ist eine sehr gute Konvertierung)

1.6rem = 16px (Dies ist eine gute Konvertierung)

Es gibt ein Problem im Chrome-Browser, dass Schriftarten, die kleiner als 12px sind, alle in 12px konvertiert werden

aber es wird ein Problem geben, wenn wir die Breite und Höhe des Elements berechnen

Zum Beispiel die Breite von Ein Div hatte ursprünglich 100 Pixel und die Höhe 100 Pixel

Nach unseren ursprünglichen Gedanken Breite: 10rem & Höhe: 10rem

Aber in Wirklichkeit , es hat nicht unsere Erwartungen erfüllt. Breite: 120 Pixel (Breite: 10 rem) und Höhe: 120 Pixel (Höhe: rem). . . . . .

Es gibt kein Problem mit der Schriftgröße, aber warum funktionieren Breite und Höhe nicht? . . . .

Der Grund dafür ist, dass die minimale Schriftgröße von Chrome, wie gerade erwähnt, 12 Pixel beträgt. .

Wir haben die Schriftgröße in HTML auf 62,5 % (= 10 Pixel) festgelegt. Der tatsächliche Wert beträgt = 12 Pixel.

Zu diesem Zeitpunkt kennen wir den Grund und können ihn festlegen so

Geben Sie 62,5 % * 12 ein

Dividieren Sie dann den ursprünglichen Wert durch 2

Zum Beispiel

html{

Schriftart- Größe: 125 %; 0,8*/

Breite: 5rem; /*Echter Wert: 100px Wie kommt es, dass 100/10/2=5*/

}

Was tun, wenn die Arithmetik nicht sehr gut ist

Wir können festlegen, dass 100 zum Konvertieren verwendet wird

html{

font-size:625%;

}div{

font-size: 0.16rem; /*Echter Wert: 16px Wie kam es dazu? 16/100=0.16*/

width: 1rem; / *Realer Wert: 100px Wie kam es zu 100/100=1*/

}

Dies ähnelt also der 62,5 %-Konvertierung , die Division durch 10 wird zur Division durch 100

Das obige ist der detaillierte Inhalt vonAnalyse des Problems, dass die Breite und Höhe von rem nicht wirksam werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!