Mobile Web-Bildschirmanpassung (rem)
|
Vorwort Ich habe vor Kurzem meine bisherigen Notizen zum Erlernen des Front-Ends sortiert und festgestellt, dass ich die mobile Web-Bildschirmanpassung (REM) nicht wirklich verstand, ich wusste nur, wie man sie verwendet. Als Nächstes werde ich einige meiner Gedanken zur mobilen Web-Bildschirmadaption (REM) aufzeichnen. rem Einführung rem stellt die Schriftgröße des Stammelements (<html>) dar. Das heißt, wenn die Schriftgröße des Stammelements 14px beträgt, dann ist 1rem = 14px rem angepasst an das mobile Web Anpassungseffekt Auf Bildschirmen unterschiedlicher Größe scheint die Größe desselben Elements möglicherweise nicht gleich zu sein, der Anteil der Bildschirmbreite, den es einnimmt, ist jedoch gleich. Code
// Im Head-Tag der HTML-Datei <script type="text/javascript">
(Funktion(){
var html = Dokument.Dokumentelement;
// Bildschirmbreite ermitteln (px)
var hWidth = html.getBoundingClientRect().width;
// Setzt die Schriftgröße des HTML-Tags auf hWidth/15
html.style.fontSize = hBreite/15 + 'px';
})()
</Skript>
// In less /* Variable @r definieren: 750/15 */
@r:50rem;
div {
Breite: 100/@r;
Höhe: 200/@r;
}Javascript Code Zuerst kopieren wir 1/15 der Bildschirmgröße (px) in das Fontsize-Attribut des HTML-Tags. An diesem Punkt entspricht auf jeder Bildschirmgröße 1/15 Pixel der Bildschirmgröße (px) 1rem. Das heißt, auf Bildschirmen jeder Größe ist der Anteil der Bildschirmbreite, den das Element einnimmt, auf Bildschirmen aller Größen gleich, solange für ein Element derselbe Rem-Wert festgelegt ist. Wenn der Anteil gleich ist, wird er an Bildschirme aller Größen angepasst. weniger Code Nun müssen wir nur noch die px-Einheiten der Elemente im Design in rem-Einheiten umrechnen. Daher können wir den Designentwurf derzeit als einen Mobiltelefonbildschirm einer bestimmten Größe betrachten. Daher gilt 750/15 = 50px, das heißt auf einem Handy-Bildschirm in der Größe des Design-Entwurfs gilt 1rem = 50px. Dann definieren wir im Less-Code eine Variable @r. Die Breite des Div beträgt 100 Pixel. Da auf einem Bildschirm der Größe des Designentwurfs 1 rem = 50 Pixel ist, beträgt der Rem-Wert des Div: 100/50 rem, also 100/@r. Die Höhe des Div beträgt 200 Pixel. Da auf einem Bildschirm der Größe des Designentwurfs 1 rem = 50 Pixel ist, beträgt der Rem-Wert des Divs: 200/50 rem, also 200/@r. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
>>: Verschieben Sie die MySQL-Datenbank unter Windows auf eine andere Festplatte
Artikel empfehlen
Beispielanalyse der MySQL-Codeausführungsstruktur [Sequenz-, Verzweigungs-, Schleifenstruktur]
Dieser Artikel beschreibt anhand eines Beispiels ...
Perfekte Lösung für das Problem, unter Windows 10 nicht auf den Port des Docker-Containers zugreifen zu können
Beheben Sie das Problem, dass unter Windows 10 ke...
HTML+CSS+JavaScript realisiert die Anzeige des ausgewählten Effekts nach der Mausbewegung
1. Anzeigeeffekt: 2. HTML-Struktur <div Klasse...
Lösung für den Docker-Container, der nicht gestoppt und gelöscht werden kann
Suchen Sie die ID des laufenden Containers Docker...
Beispiel für die Einrichtung eines mehrspaltigen Layouts gleicher Höhe mit CSS
Mehrere Spalten haben zunächst unterschiedliche I...
Drei Möglichkeiten, in CSS3 eine Hintergrundunschärfe zu erzielen (Zusammenfassung)
1. Normale Hintergrundunschärfe Code: <Stil>...
Ungewöhnliche, aber nützliche Tags in Xhtml
Xhtml hat viele Tags, die nicht häufig verwendet w...
Das Linux-System öffnet die Ports 3306, 8080 usw. zur Außenwelt. Detaillierte Erläuterung der Firewall-Einstellungen
Nachdem wir eine Webdienstanwendung (wie etwa Tom...
3 Möglichkeiten zum Hinzufügen von Links zu HTML-Auswahl-Tags
Der Erste : Code kopieren Der Code lautet wie folg...
Javascript Frontend Optimierungscode
Inhaltsverzeichnis Optimierung der if-Beurteilung...
Implementierungscode für den MySQL-Protokolltrigger
SQL-Anweisung DROP-TRIGGER WENN EXISTIERT sys_men...
Eine kurze Diskussion über den VUE Uni-App-Lebenszyklus
Inhaltsverzeichnis 1. Anwendungslebenszyklus 2. S...
So verwenden Sie dl(dt,dd), ul(li), ol(li) in HTML
HTML <dl> Tag #Definition und Verwendung Da...
JavaScript-Dom-Objektoperationen
Inhaltsverzeichnis 1. Kern 1. Holen Sie sich den ...
Prinzip und Anwendungsbeispiele des URL-Umschreibmechanismus von Nginx
Durch das Umschreiben der URL lässt sich die bevo...