Die Entwicklung und Anwendung von CSS-Layouteinheiten: von Pixeln zu relativen Einheiten basierend auf der Schriftgröße des Stammelements

Von px zu rem: Die Entwicklung und Anwendung von CSS-Layouteinheiten

Einführung:
In der Front-End-Entwicklung müssen wir häufig CSS verwenden, um das Seitenlayout zu implementieren. In den letzten Jahren haben sich CSS-Layouteinheiten weiterentwickelt und weiterentwickelt. Ursprünglich verwendeten wir Pixel (px) als Einheit, um die Größe und Position von Elementen festzulegen. Mit dem Aufkommen des Responsive Designs und der Beliebtheit mobiler Geräte haben Pixeleinheiten jedoch nach und nach einige Probleme aufgedeckt. Um diese Probleme zu lösen, wurde die neue Einheit rem ins Leben gerufen und nach und nach im CSS-Layout weit verbreitet.

1. Einschränkungen der Pixeleinheit (px)
1.1 Feste Größe
Als früheste weit verbreitete Einheit weist die Pixeleinheit die Eigenschaft einer festen Größe im Layout auf. Dies bedeutet, dass bei der Anzeige der Seite auf verschiedenen Geräten oder unterschiedlichen Bildschirmgrößen die Größe der Pixeleinheit nicht angepasst wird, was dazu führt, dass das Seitenlayout ungeordnet wird oder nicht vollständig angezeigt werden kann.

1.2 Probleme mit hochauflösenden Geräten
Mit der Beliebtheit hochauflösender Geräte wie Retina-Bildschirmen werden die Mängel von Pixeleinheiten immer offensichtlicher. Wenn Elemente mit niedrigen Pixeleinheiteneinstellungen auf einem hochauflösenden Gerät angezeigt werden, führt dies zu Pixelbildung oder einer verschwommenen Anzeige, was sich auf das Benutzererlebnis auswirkt.

1.3 Komplexe Bearbeitung
Die Pixeleinheit muss entsprechend der Auflösung des Geräts angepasst werden, was bedeutet, dass beim Schreiben von CSS die Pixeldichte verschiedener Geräte berücksichtigt werden muss, was die Komplexität des Schreibens und Verwaltens von Code erhöht.

2. Einführung in die rem-Einheit
2.1 Was ist rem
rem ist eine relative Einheit, die die Einheit der Schriftgröße relativ zum Stammelement (HTML) darstellt. Seine Größe ist relativ zur Schriftgröße des Stammelements. Wenn wir die Schriftgröße des Stammelements auf 16 Pixel festlegen, entspricht 1rem 16 Pixel.

2.2 Vorteile von rem

• Adaptives Layout: Mithilfe von rem können Einheiten adaptiv an die Schriftgröße des Stammelements angepasst werden, wodurch flexible Layoutänderungen auf verschiedenen Geräten erreicht werden.
• Lösung des Problems hochauflösender Geräte: Da rem eine relative Einheit ist und nicht von der Pixeldichte des Geräts beeinflusst wird, können unter verschiedenen Auflösungen konsistente Layouteffekte erzielt werden.
• Vereinfachen Sie das Schreiben von Code: Die Verwendung von Rem-Einheiten kann das Schreiben von Code vereinfachen, und Sie müssen nicht mehr die Pixeldichte verschiedener Geräte berücksichtigen.

3. So verwenden Sie rem-Einheiten
3.1 Legen Sie die Schriftgröße des Stammelements fest
Bevor Sie rem-Einheiten verwenden, müssen Sie zuerst die Schriftgröße des Stammelements festlegen. Normalerweise stellen wir die Schriftgröße des Stammelements auf 16 Pixel ein, also 1rem = 16 Pixel.

html {
  font-size: 16px;
}

3.2 Rem-Einheiten verwenden
Sobald Sie die Schriftgröße des Stammelements festgelegt haben, können Sie rem-Einheiten in anderen Elementen für das Layout verwenden.

.container {
  width: 20rem; /* 相当于320px */
  height: 10rem; /* 相当于160px */
  font-size: 1.2rem; /* 相当于19.2px */
  margin-top: 2rem; /* 相当于32px */
}

4. Ändern Sie die Schriftgröße des Stammelements dynamisch
4.1 Medienabfrage
Medienabfrage kann die Schriftgröße des Stammelements dynamisch entsprechend verschiedenen Bildschirmgrößen ändern.

@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

4.2 Dynamische JavaScript-Berechnung
Verwenden Sie JavaScript, um die Schriftgröße des Stammelements basierend auf der Bildschirmgröße dynamisch zu berechnen.

function setRootFontSize() {
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var fontSize = screenWidth / 10;
  document.documentElement.style.fontSize = fontSize + 'px';
}

setRootFontSize();

window.addEventListener('resize', setRootFontSize);

5. Zusammenfassung
Durch die Verwendung von Rem-Einheiten können wir ein responsives Layout implementieren und Layoutprobleme auf verschiedenen Geräten lösen. Die Verwendung von rem-Einheiten kann unser Layout flexibler und anpassungsfähiger machen und gleichzeitig das Schreiben von Code vereinfachen. In tatsächlichen Projekten sollten wir geeignete Layouteinheiten entsprechend den tatsächlichen Anforderungen auswählen und REM-Einheiten rational verwenden, um eine bessere Benutzererfahrung zu erzielen.

Referenzen:

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-size
• https://www.w3schools.com/cssref/css_units.asp
• https ://juejin.cn/post/6844904117648772110

Das obige ist der detaillierte Inhalt vonDie Entwicklung und Anwendung von CSS-Layouteinheiten: von Pixeln zu relativen Einheiten basierend auf der Schriftgröße des Stammelements. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!