So verwenden Sie rem in CSS3

rem ist ein relativer Größenwert, relativ zur Einheit der Schriftgröße des HTML-Elements, und das Syntaxformat ist „Element: Zahl + rem“. rem ändert die Schriftgröße des Browsers, wodurch das Layout unserer Webseite beschädigt wird.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

css3 hat die relative Einheit rem hinzugefügt. Die Verwendung von rem ist eine relative Einheit, relativ zur Einheit der Schriftgröße des Stammelements ist die Einheit relativ zur Schriftgröße des HTML-Elements.

Vorteile: Bei der Berechnung der Größe untergeordneter Elemente müssen Sie diese nur anhand der Schriftgröße des HTML-Elements berechnen. Es ist nicht mehr wie bei der Verwendung von em, man muss für häufige Berechnungen hin und her gehen, um die Schriftgröße des übergeordneten Elements zu ermitteln, und auf einen Taschenrechner kommt man überhaupt nicht verzichten.

rem ist die Einheit

Mit der Einführung von CSS3 wurden auch einige neue Einheiten eingeführt, darunter das, was wir heute rem nennen. Rem wird auf der offiziellen W3C-Website wie folgt beschrieben: „Schriftgröße des Stammelements“. Schauen wir uns rem genauer an.

rem ist relativ zum Stammelement , was bedeutet, dass wir nur einen Referenzwert im Stammelement bestimmen und die Schriftgröße im Stammelement festlegen müssen Sie können sich auch auf das Bild unten beziehen:

Sehen wir uns ein einfaches Beispiel an:

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

Ich habe im Stammelement eine Grundschriftgröße von 62,5 % (also 10 Pixel) definiert dient hauptsächlich der Erleichterung der Berechnung. Wenn nicht festgelegt, basiert es auf „16px“). Aus den obigen Berechnungsergebnissen können wir „rem“ genauso bequem wie „px“ verwenden und gleichzeitig die Differenz zwischen „px“ und „em“ lösen.

Rem-Nutzung

Zuerst müssen wir dieses Tag hinzufügen:

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

Die spezifische Bedeutung ist wie folgt:

initial-scale – das anfängliche Zoomverhältnisminimum-scale – das minimale Verhältnis, mit dem der Benutzer maximal zoomen darf- Skalierung – Der Benutzer darf auf den maximalen Anteil von

zoomen und dann die Schriftgröße von HTML festlegen:

// resize 窗口大小发生改变的时候才会触发的，第一次加载时不会触发
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    // 手机屏幕是否反转orientationchange
    window.addEventListener(resizeEvt, setFontSize, false); // IE 谷歌
document.addEventListener('DOMContentLoaded', setFontSize, false); //火狐
function setFontSize() {
    var cWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var basicNum = 200;
    var htmlFontSize = basicNum * (cWidth / 设计稿宽度);
    document.documentElement.style.fontSize = htmlFontSize + 'px';
}

Die Breite des allgemeinen Designentwurfs beträgt 750. Während des Entwicklungsprozesses verwenden wir iPhone6/7/8 als Benchmark sollte die Schriftgröße von HTML mit 200 *(375/750)=100px berechnet werden, wenn also im Designentwurf ein Feld mit einer Breite von 200px vorhanden ist. Wir müssen seine Breite auf (200/100)rem setzen, deshalb empfehle ich, basicNum auf 200 zu setzen, weil es einfach zu berechnen ist.

var htmlFontSize=basicNum*(cWidth/设计稿宽度);

Es ist ersichtlich, dass die Schriftgröße des Root-HTML umso größer ist, je breiter der Bildschirm ist. Da andere Elemente darauf basieren, können sie adaptiv sein.

Browserkompatibilität

rem ist eine neu eingeführte Maßeinheit in CSS3. Jeder wird definitiv frustriert und besorgt über die Browserunterstützung sein. Haben Sie keine Angst, Sie werden überrascht sein, dass es eine ganze Reihe unterstützter Browser gibt, wie zum Beispiel: Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, IE9+ und Opera11+.

Wenn Sie jedoch Einheiten zum Festlegen von Schriftarten verwenden, können Sie den IE nicht vollständig ignorieren. Wenn Sie dieses REM verwenden möchten, aber auch mit dem Effekt unter IE kompatibel sein möchten, können Sie die gemeinsame Verwendung von „px“ und „rem“ in Betracht ziehen. Verwenden Sie „px“, um den Effekt unter IE6-8 zu erzielen, und verwenden Sie dann „Rem“, um den Effekt des Browsers zu erzielen.

Empfohlenes Lernen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie rem in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!