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
Keepalived+Nginx+Tomcat-Beispielcode zur Implementierung eines hochverfügbaren Webclusters
Keepalived+Nginx+Tomcat zur Erzielung eines hochv...
Linux-Konfiguration ohne Passwort-Login, eigenständige und vollständige Distribution, ausführliches Tutorial
Inhaltsverzeichnis 1: Kennwortfreie Anmeldekonfig...
Detaillierte Erklärung der Kartenüberlagerung in OpenLayers6
1. Overlay-Übersicht Overlay bedeutet Überlagerun...
MySQL REVOKE zum Löschen von Benutzerberechtigungen
In MySQL können Sie mit der REVOKE-Anweisung best...
Natives JS zur Implementierung der Paging-Klicksteuerung
Dies ist eine Interviewfrage, die die Verwendung ...
Detaillierte Erläuterung des dynamischen Zeitbereichsgrenzfalls im Vue el-date-picker
Es gibt zwei Situationen 1. Startzeit und Endzeit...
Beispieloperation MySQL Kurzlink
So richten Sie einen MySQL-Kurzlink ein 1. Überpr...
Installation, Konfiguration und Deinstallation von MySQL 8.0 in einer Windows-Umgebung
Softwareversion Windows: Windows 10 MySQL: mysql-...
Idea stellt Remote-Docker bereit und konfiguriert die Datei
1. Ändern Sie die Docker-Konfigurationsdatei des ...
Detaillierte Erklärung zur Verwendung von Docker zum Erstellen einer Entwicklungsumgebung für Laravel- und Vue-Projekte
Dieser Artikel stellt die Entwicklungsumgebung vo...
Analysieren Sie das Arbeitsprinzip von Tomcat
SpringBoot ist wie eine riesige Python, die sich ...
Vue realisiert die Palastgitterrotationslotterie
Vue implementiert die Palastgitterrotationslotter...
Detaillierte Erläuterung der Kapselung von JavaScript-Animationsfunktionen
Inhaltsverzeichnis 1. Prinzip der Animationsfunkt...
Detaillierte Erklärung einiger Einstellungen für Tabellenanpassung und Überlauf
1. Zwei Eigenschaften des Tabellen-Resets: ①borde...
So legen Sie MySQL-Fremdschlüssel für Anfänger fest
Inhaltsverzeichnis Die Rolle von Fremdschlüsseln ...