Web-Frontend
CSS-Tutorial
Detaillierte Erläuterung der Verwendung von REM-Einheiten in CSS3 (Codebeispiel)
Detaillierte Erläuterung der Verwendung von REM-Einheiten in CSS3 (Codebeispiel)
Viele Websites verwenden Pixeleinheiten, die sich auf immer mehr verschiedenen Geräten nur schwer anpassen lassen. CSS3 führt einige neue Einheiten ein, darunter REM-Einheiten, die für „root em“ stehen. Es geht um die Verwendung von REM.
Wie nutzen wir also REM?
Angenommen, wir haben dieses CSS:
CSS
article h2 {font-size:20px;}
article p {font-size:12px;}Zuerst müssen wir die px-Größe relativ zu allen Schriftarten bestimmen. Der Einfachheit halber habe ich die Stammschriftgröße am besten wie folgt auf 1 Pixel festgelegt:
CSS
html {font-size:1px;}Zweitens müssen wir die restlichen Werte für die Schriftgröße ändern aus Pixel werden durch rem-Einheiten ersetzt.
CSS
article h2 {font-size:20rem;}
article p {font-size:12rem;}REM macht, was es tut, nimmt 20REM und multipliziert es mit dem Wurzelelement:
20 REM * 1 PX = 20PX.
Browser-Unterstützung
IE7 und IE8 müssen weiterhin PX-Werte verwenden. Dadurch werden wir gezwungen, die Schriftgröße zweimal zu schreiben, einmal in PX und ein zweites Mal in REM.
CSS
article h2 {font-size:20px; font-size:20rem;}
article p {font-size:12px; font-size:12rem;}Das Beispiel ist wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html{font-size:1px;}
article h2{
font-size:20px;/*Support IE7 & IE8*/
font-size:20rem;
}
article p{
font-size:12px;/*Support IE7 & IE8*/
font-size:12rem;
}
</style>
</head>
<body>
<section>
<article>
<h2 id="php中文网">php中文网</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
<article>
<h2 id="php中文网">php中文网1</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
<article>
<h2 id="php中文网">php中文网2</h2>
<p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</article>
</section>
</body>
</html>Der Effekt ist wie folgt:
REM hat Was sind die Vorteile?
Nehmen wir an, wir müssen alle Schriftarten auf der Website um 20 % vergrößern. Alles, was wir tun müssen, ist, die Schriftgröße im Stammelement wie folgt zu ändern:
html {font-size:1.2px;}Wenn Sie die Schriftgröße um 20 % reduzieren möchten, gehen Sie folgendermaßen vor:
html{font-size:0.8px;}REM für responsives Design Klicken Sie hier, um alle Schriftgrößen zu ändern. Das ist einfacher. Siehe Beispiel:
@media (min-width: 320px){
html{
font-size:1.4px;
}}
@media (min-width: 600px){
html{
font-size:1.2px;
}}Verwenden Sie less, um Inhalte nicht mehr zweimal schreiben zu müssen – zur Unterstützung alter Browser
In less oder sass können Sie Funktionen hinzufügen, die Ihnen das ständige doppelte Schreiben ersparen .
Sie können die Funktion zur Reduzierung der Schriftgröße verwenden und sie.font-size(@font-size) {
font-size : @font-size * 1px;
font-size : @font-size * 1rem;
}
article h2 {
.font-size(20);
}article h2{
font-size:20px;
/*Support IE7 & IE8*/
font-size:20rem;
}Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von REM-Einheiten in CSS3 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1359
52
Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices
Mar 08, 2025 am 09:45 AM
Dies ist der 3. Beitrag in einer kleinen Serie, die wir in Form von Barrierefreiheit gemacht haben. Wenn Sie den zweiten Beitrag verpasst haben, lesen Sie "Verwalten des Benutzerfokus mit: Fokus-Sichtbar". In
Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen
Mar 09, 2025 pm 12:53 PM
Die CSS-Box-Shadow- und Umrisseigenschaften haben Thema gewonnen. JSON-Unterstützung in WordPress 6.1. Sei ein paar Beispiele für die Funktionsweise in realen Themen und welche Optionen wir diese Stile auf WordPress -Blöcke und Elemente anwenden müssen.
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Machen Sie Ihren ersten Seltsamen -Sufle -Übergang
Mar 15, 2025 am 11:08 AM
Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.
Edle und coole CSS -Scrollbars: Ein Schaufenster
Mar 10, 2025 am 11:37 AM
In diesem Artikel werden wir in die Welt der Scrollbars eintauchen. Ich weiß, es klingt nicht zu glamourös, aber vertrau mir, eine gut gestaltete Seite geht Hand in Hand
Show, Don ' Tell
Mar 16, 2025 am 11:49 AM
Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Was zum Teufel haben NPM -Befehle?
Mar 15, 2025 am 11:36 AM
NPM-Befehle führen verschiedene Aufgaben für Sie aus, entweder als einmalige oder als kontinuierlich ausgeführter Vorgang für Dinge wie das Starten eines Servers oder das Kompilieren von Code.
