Das Design ist großartig, dieses Mal basiert es wirklich auf dem Designentwurf, denn jetzt ist jede Maschine laut Designentwurf eine Standardmaschine! Liebe Entwickler-Klassenkameraden, jetzt können Sie die Anmerkungen zum Designentwurf direkt lesen!
BildschirmanpassungDie Bildschirmanpassung sollte sich auf die Anpassungsbeziehung zwischen dem Inhaltsanpassungsbereich und dem Bildschirmintervall beziehen.
Die Adaption auf einem Bildschirm umfasst „Einschließen“, „Abdecken“ oder „Füllung“, und die Adaption auf mehreren Bildschirmen basiert normalerweise auf der Breite.
„Contain“ und „Cover“ müssen ebenfalls positioniert werden, um Leerraum und überschüssigen Inhalt zu bewältigen.
Unterschiedliche Inhalte im selben H5 verwenden oft unterschiedliche Anpassungsmethoden, nämlich Layering.
Bevorzugtes CSSWenn es bei Leistungsproblemen wie der Bildschirmanpassung mit CSS implementiert werden kann, sollte es mit CSS implementiert werden.
Anpassung der gesamten SchichtUm sicherzustellen, dass die Elemente jeder Ebene synchron und ohne Verzerrung skaliert werden, sollte der Anpassungsbereich jeder Ebene der Größe des Entwurfsentwurfs entsprechen.
Die direkte Implementierung besteht darin, einen Container mit der gleichen Größe wie der Anpassungsbereich zu erstellen und die gesamte Ebene anzupassen.
Im Container können sich mehrere Elemente mit der gleichen Adaptionsmethode befinden.
Nehmen Sie als Beispiel svg -Implementierung:
<!doctype html><body><style>.layer { position: absolute; left: 0; height: 100%;}</style><!-- fill - -><svg class=layer viewBox=0 0 1080 1920 retainAspectRatio=none> <!-- container--> <rect x=0 y=0 width=1080 height=1920 fill=rgba(96,96,96,.08)/> <!-- element--></svg><!-- include center--><svg class=layer viewBox=0 0 1080 1920 keepAspectRatio=xMidYMid meet> <!-- container--> <rect x=0 y=233 width=1080 height=1407 fill=#1565C0/> <!-- element--></svg><!-- enthält unten--><svg class=layer viewBox=0 0 1080 1920 retainAspectRatio=xMidYMax meet> <!- - Container--> <rect x=444 y=1779 width=191 height=39 fill=#1565C0/> <!-- Element--></svg></body></html>Tatsächlicher Effekt:
Die Anpassung der gesamten Ebene ist einfach zu implementieren und die Entwurfswerte werden während der Entwicklung direkt gelesen, wodurch die Anforderungen der meisten statischen Seiten erfüllt werden können.
Wenn es jedoch viele h5-Animationen gibt, müssen Sie die Glätte der Animation und die Leistung der Seite berücksichtigen.
Verwenden Sie austauschbare Elemente wie <img> <object> <svg> als Container und Hintergrundbilder als Elemente.
Beim Anwenden von CSS-Animationen treten Leistungsmängel auf:
Um die Leistung dieser Implementierungen zu verbessern, müssen wir uns auf die Containeranimation konzentrieren und die Größe des Containers am besten auf die minimale Gesamtfläche aller Elemente in einer Ebene reduzieren, um eine optimierte Anpassung zu erreichen.
Vereinfachte Anpassung FormelInformationen zum Ableitungsprozess finden Sie unter Ableitung der H5-Schichtbildschirmanpassungsformel.
Die Breite des Entwurfs ist v und die Höhe ist x. Die vertikale Koordinate ist y. Nach der Anpassung ist die horizontale Koordinate des Containers ist x3 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1 Ordinate y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1 Breite w3 = (w/v)*u Höhe h3 = (h/g)*f wenn enthalten Bei der Anpassung der Methode beträgt der Skalierungswert s = Math.min(f/g, u/v) Der horizontale linke Leerraum macht den gesamten Leerraum aus o = (m*v - x)/w Der vertikale Leerraum macht aus der gesamte Leerraum p = ( n*g- y)/h Wenn der Cover-Modus angepasst wird, ist der Skalierungswert s = Math.max(f/g, u/v) Der horizontale linke Überschuss macht den Gesamtüberschuss aus o = (x - m*v)/w Der vertikale Überschuss macht den Gesamtüberschuss aus p = (y - n*g)/h Wenn der Anpassungsbereich vertikal oben ist, ist m = 0. Wenn er vertikal zentriert ist, ist m = .5 Wenn er vertikal unten ist, m = 1. Wenn es horizontal links ist, ist n = 0. Wenn es horizontal zentriert ist, ist n = .5. Horizontal auf der rechten Seite ist n = 1 im Vergleich zur Speicheroptimierung für die Anpassung der gesamten Schicht (w3*h3)/(v1*g1) >= w*h/(v*g)<img>-Implementierungsbeispiel
Wenn die maximale Breite w/v und die maximale Höhe h/g ist, entspricht dies einer enthaltenen Anpassung.
Wenn die Mindestbreite auf w/v und die Mindesthöhe auf h/g eingestellt ist, entspricht dies der Cover-Anpassung.
Wenn die Breite w/v und die Höhe h/g beträgt, bedeutet dies eine Füllanpassung.
Wenn die Originalgröße des Bildes während der Einschlussanpassung kleiner als die maximale Breite und maximale Höhe ist, verwenden Sie Zoom: 10, um die Originalgröße des Bildes zu vergrößern oder direkt zu ändern.
Wenn während der Cover-Anpassung die Originalgröße des Bildes größer als die Mindestbreite und Mindesthöhe ist, verwenden Sie Zoom: .1, um die Originalgröße des Bildes zu verkleinern oder direkt zu ändern.
Da der Prozentsatz oben links relativ zur Bildschirmbreite u und -höhe f ist, entspricht er m*u und n*f
Da der Prozentsatz bei der Transformation relativ zur Breite w1 und Höhe h1 des angepassten Elements ist, entspricht er (m*v + x)/w*w1 und (n*f + y)/h*h1
<!doctype html><html><body><style>img { /* min-width und min-height bilden einen virtuellen Container*/ min-width: 50.37037037037037%; /* w3 = (w/v)*u where w = 544, v = 1080 */ min-höhe: 7,395833333333333%; /* h3 = (h/g)*f wobei h = 142, g = 1920 */ Zoom: .1; /* x4 = m*u + (x - m*v)/w*w1 */ /* y4 = n*f + (y - n*g)/h*h1 */ Position: absolut links: 50%; wobei m = .5*/ top: 50 %; /* n*f wobei n = .5 */ transform: translatorX(-48.34558823529412 %) /* (x - m*v)/w*w1 wobei x = 277, m = .5, v = 1080, w = 544 */ TranslateY(378.8732394366197%) /* (y - n*g)/h*h1 wobei y = 1498, n = .5, g = 142 *//style><img src=http:/ /ui.qzone.com/544x142/> <!-- Element --></body></html> Beispiel für eine Hintergrundimplementierungbackground-size contain entspricht dies einer enthaltenen Anpassung.background-size cover entspricht dies der Cover-Anpassung.background-size 100% 100% einer „Füllanpassung“.background-position hat die gleiche p wie o <!doctype html><html><body><style>div { position: absolute; width: 50.37037037037037%; /* w3 = w/v*u where w = 544, v = 1080 */ height: 7.395833333333333%; * h3 = h/g*f wobei h = 142, g = 1920 */ Hintergrund: url(http://ui.qzone.com/544x142) /* Hintergrundbild als Element*/ Hintergrundgröße: cover left: 25.64814814814815%; u wobei x = 277, v = 1080 */ oben: 78,02083333333333 %; /* y3 = y/g*f wobei y = 1498, g = 1920 */ Hintergrundposition-x: -48,34558823529412 %; /* o = (x - m*v)/w wobei m = .5 , v = 1080, x = 277, w = 544*/ Hintergrundposition-y: 378,8732394366197%; /* p = (y - n*g)/h wobei n = .5, g = 1920, y = 1498, h = 142*//style>< div></div> <!-- Container--></body></html><svg>-Implementierungsbeispiel
meetOrSlice von preserveAspectRatio meet entspricht dies einer enthaltenen Anpassung.meetOrSlice von preserveAspectRatio slice entspricht dies der Cover-Anpassung.preserveAspectRatio none ist, entspricht dies einer Füllanpassung.meetOrSlice von preserveAspectRatio ist hier relativ zum Container, nicht der Anpassungsbereich wird zur transform verwendet, und meetOrSlice von preserveAspectRatio ist auf xMinYMin festgelegt. <!doctype html><html><body><style>svg { position: absolute; width: 50.37037037037037%; height: 7.395833333333333%; /* x4 = m*v/w*w3 + (x - m*v)/ w*w1 */ /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */ oben: 0; links: 0; transform: translatorX(99,26470588235294%) /* m*v/w*w3 wobei m = .5, v = 1080 */ translatorY (676,056338028169 %); /* n*g/h*h3 wobei n = .5, g = 1920, h = 142 */ overflow: sichtbar;}svg image { transform: translatorX(-48.34558823529412%) /* (x - m*v)/w*w1 wobei x = 277, m = .5, v = 1080 , w = 544 */ TranslateY(378.8732394366197%); /* (y - n*g)/h*h1 wobei y = 1498, n = .5, g = 1920, h = 142 *//style><svg viewBox=0 0 544 142 retainAspectRatio=xMinYMin meet> <!-- Container--> <image width=544 height=142 xlink:href=http://ui.qzone.com/544x142/> <!-- Element --></svg></body></html> HilfswerkzeugeEs ist mühsam, Prozentsätze manuell zu berechnen und CSS zu schreiben. Zur Vereinfachung können Sie Tools wie sass verwenden.
Die Breite v und die Höhe g des Entwurfsentwurfs sind im Allgemeinen Konstanten auf Seitenebene.
Lesen Sie einfach die Abszisse x , die Ordinate y , die Breite w und die Höhe h jedes Elements im Entwurfsentwurf ab, und dann generiert das Tool CSS.
Jetzt muss sich meine Mutter nicht mehr um meine Wiederherstellungs- oder Bildschirmanpassungsprobleme kümmern.
Textverarbeitung Text ist fixiert oder einzelne Zeile ist nicht fixiert, svg text Tag kann damit umgehen
Wenn der Text fixiert ist oder eine einzelne Zeile nicht fixiert ist, können Sie den Text auch in Bilder umwandeln.
Mehrere Textzeilen sind nicht fixiert. Sie können foreignObject von svg verwenden, um gewöhnliche div
Planvergleich
Es gibt viele Bildschirmanpassungslösungen. Welche Methode sollten Sie wählen, um eine vollständige oder optimierte Anpassung zu erreichen?
| planen | Zoom | Position | Textzoom | kompatibel |
|---|---|---|---|---|
| Polsterung-Top-Prozentsatz | Kann nur nachsichtig sein | ✓ | ✗ | ✓ |
| Ansichtsfenster | ✓ | ✗ | ✓ | Der Support ist kompliziert |
| objekttauglich | ✓ | ✓ | ✗ | Mobiles Android 4.4.4+ |
| SVG PreserveRatio | ✓ | ✓ | ✓ | Mobiles Android 3.0+ |
| (max/min)-(Breite/Höhe) | ✓ | ✓ | fester Text | ✓ |
| Hintergrundgröße | ✓ | ✓ | Text zum Bild | ✓ |
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.