Video-Tutorial zum mobilen WEB-Layout

„Video-Tutorial zum mobilen WEB-Layout“ stellt die Grundlagen der mobilen Webentwicklung, effizienten Schriftsatz und Layout, häufige mobile Webprobleme, Terminal-Touch-Interaktion, die Lösung verschiedener Fehlergruben usw. vor. Wenn es um die mobile Seite geht, müssen wir das Problem der Anpassung erwähnen. Mobile Geräte aller Größen machen es nicht nur schwierig, Android und iOS zu erstellen, sondern aufgrund der Unterschiede in der Gerätegröße und den Browsern auch das Frontend Es fängt an, Kopfschmerzen zu bekommen, aber die Methode ist immer besser als wir. Wir sind ein revolutionäres Team und müssen handeln, wenn wir auf Probleme stoßen.

Adresse für die Kurswiedergabe: http://www.php.cn/course/428.html

Der Unterrichtsstil des Lehrers:

Die Vorträge des Lehrers sind lebendig, witzig, witzig und berührend. Eine lebendige Metapher ist wie der letzte Schliff, der den Schülern die Tür zur Weisheit öffnet; ein gut platzierter Humor zaubert den Schülern ein wissendes Lächeln, als würde er den Menschen einen Nachgeschmack und Nostalgie verleihen werden von Zeit zu Zeit in die Erzählung eingestreut und regen zum Nachdenken und zur Warnung an.

Der schwierigere Punkt in diesem Video ist die spezielle Stilverarbeitung des mobilen Webs:

Das Problem hochauflösender Bilder

Das High- HD-Bilder sind nicht dasselbe wie die Filme, die wir normalerweise herunterladen. Das Konzept von HD-Bildern im mobilen Web ist, dass mein Bild so groß ist wie meines und so viel Klarheit hat, dass wir es anzeigen sollten so deutlich auf mobilen Geräten. Warum gibt es also Unklarheiten? Wenn ein Bild 100 Pixel * 100 Pixel groß ist, wird es auf dem Mobilgerät als 100 Pixel * 100 Pixel angezeigt. Wenn Sie darüber nachdenken, ist das kein Problem.

Aber denken wir einmal darüber nach: Auf einem Retina-Bildschirm entspricht ein Pixel zwei dp. Wenn Sie also 100 Pixel * 100 Pixel verwenden, verwenden Sie tatsächlich 200 dp * 200 dp physische Pixel zum Rendern, und das Bild wird so sein vergrößert und unscharf.

Um ein Verwischen des Bildes zu vermeiden, sollten beim Rendern von Bildern auf mobilen Webseiten die Breite und Höhe des Bildes in physischen Pixeleinheiten gerendert werden, d. h. für ein 100 * 100-Bild 100 dp * Es sollten 100 dp verwendet werden.

width:(w_value/dpr) px; 
height:(h_value/dpr) px;

Um es ganz klar auszudrücken: Wenn das Bild 100 * 100 ist, sollten wir zum Rendern 50 * 50 Pixel verwenden, wenn der DPR zu diesem Zeitpunkt größer als 2 ist unter iPhone6 ​​​​Plus , dann sollten wir es durch dpr(3) dividieren.

Hier empfehlen wir auch den Download von Quellcode-Ressourcen: http://www.php.cn/xiazai/code/2051

Diese Video-Kursunterlagen werden mit allen geteilt:

1. Video-Tutorial zum mobilen WEB-Layout

Das obige ist der detaillierte Inhalt vonVideo-Tutorial zum mobilen WEB-Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!