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
Der Unterschied zwischen Update und Select in MySQL für einzelne und mehrere Tabellen sowie Ansichten und temporäre Tabellen
1. Verwenden Sie Daten aus Tabelle A, um den Inha...
Detaillierte Beschreibung der Unicode-Signatur-BOM
Unicode-Signatur-BOM – Was ist die BOM? BOM ist di...
Erklärung zur Verwendung von JavaScript ECharts
Ich habe ECharts schon einmal bei einem Projekt v...
Detaillierte Erklärung, warum MySQL nicht mit UNION zwei Abfragen verbinden kann
Überblick UNION Mit dem Schlüsselwort „Verbindung...
So verhindern Sie, dass sich vsftpd-Benutzer über SSH anmelden
Vorwort vsftp ist eine benutzerfreundliche und si...
CSS erzielt den Effekt der Vermischung zweier Elemente (Sticky-Effekt)
Ich erinnere mich, dass es vor ein paar Jahren in...
Rsync+crontab regelmäßige Synchronisierungssicherung unter centos7
In letzter Zeit möchte ich regelmäßig wichtige in...
LINUX Prüft, ob der Port belegt ist
Ich konnte nie herausfinden, ob der Port belegt i...
Einführung in den Swap-Speicher des Linux-Systems
Swap-Speicher ist heutzutage ein gängiger Aspekt ...
4 flexible SCSS-Kompilierungsausgabestile
Vielen Leuten wird das Kompilieren erklärt, sobal...
HTML-Formular und die Verwendung interner Formular-Tags
Code kopieren Der Code lautet wie folgt: <html...
So ändern Sie den MySQL-Zeichensatz utf8 in utf8mb4
Wenn für MySQL 5.5 der Zeichensatz nicht festgele...
js zur Realisierung eines einfachen Puzzlespiels
In diesem Artikel wird der spezifische Code von j...
Ein Debugging-Prozessprotokoll für chinesische Zeichentrickfiguren in der Startkonsole des Tomcat-Quellcodes
Finden Sie das Problem Heute werde ich den Tomcat...
Detaillierte Erklärung von Promises in JavaScript
Inhaltsverzeichnis Grundlegende Verwendung von Pr...