Le design est génial, cette fois il est vraiment basé sur le projet de conception, car désormais, toute machine est une machine standard selon le projet de conception ! Camarades de classe développeurs, vous pouvez désormais simplement lire directement les annotations du brouillon de conception !
Adaptation à l'écranL'adaptation d'écran doit faire référence à la relation d'adaptation entre la zone d'adaptation de contenu et l'intervalle d'écran.
L'adaptation sur un seul écran inclut le contenu, la couverture ou le remplissage, et l'adaptation sur plusieurs écrans est généralement basée sur la largeur.
contenir et couvrir doivent également être positionnés pour gérer les espaces blancs et le contenu excédentaire.
Différents contenus dans le même H5 utilisent souvent différentes méthodes d'adaptation, c'est-à-dire la superposition.
CSS préféréPour les problèmes de performances tels que l'adaptation d'écran, s'il peut être implémenté avec CSS, il doit être implémenté avec CSS.
Adaptation de toute la coucheAfin de garantir que les éléments de chaque couche sont mis à l'échelle de manière synchrone sans distorsion, la zone d'adaptation de chaque couche doit être égale à la taille du projet de conception.
La mise en œuvre directe consiste à construire un conteneur de la même taille que la zone d'adaptation et à adapter la couche entière.
Il peut y avoir plusieurs éléments avec la même méthode d'adaptation dans le conteneur.
Prenons l'exemple de l'implémentation svg :
<!doctype html><html><body><style>.layer { position : absolu ; top : 0 ; largeur : 100 % ;</style>< !-- fill - -><svg class=layer viewBox=0 0 1080 1920 préservationAspectRatio=none> <!-- conteneur--> <rect x=0 y=0 width=1080 height=1920 fill=rgba(96,96,96,.08)/> <!-- element--></svg><!-- contain center--><svg class=layer viewBox=0 0 1080 1920 préserverAspectRatio=xMidYMid meet> <!-- conteneur--> <rect x=0 y=233 width=1080 height=1407 fill=#1565C0/> <!-- element--></svg><!-- contain bottom--><svg class=layer viewBox=0 0 1080 1920 préservationAspectRatio=xMidYMax meet> <!- - Conteneur--> <rect x=444 y=1779 largeur=191 hauteur=39 fill=#1565C0/> <!-- Élément--></svg></body></html>Effet réel :
L'ensemble de l'adaptation des couches est simple à mettre en œuvre et les valeurs du projet de conception sont directement lues pendant le développement, ce qui peut répondre aux besoins de la plupart des pages statiques.
Mais lorsqu’il y a beaucoup d’animations h5, il faut considérer la fluidité de l’animation et les performances de la page.
Utilisez des éléments remplaçables tels que <img> <object> <svg> comme conteneurs et utilisez des images d'arrière-plan comme éléments.
Il existe des défauts de performances lors de l'application des animations CSS :
Pour améliorer les performances de ces implémentations, nous devons nous concentrer sur l'animation du conteneur et réduire la taille du conteneur. Il est préférable de la rendre égale à la surface totale minimale de tous les éléments d'une couche pour obtenir une adaptation rationalisée.
Adaptation simplifiée formulePour le processus de dérivation, voir Dérivation de la formule d'adaptation d'écran en couches H5.
La largeur du brouillon est v et la hauteur est g. La coordonnée horizontale de l'élément avant adaptation est x. La coordonnée verticale est y. La hauteur est h. est x3 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1 ordonnée y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1 largeur w3 = (w/v)*u hauteur h3 = (h/g)*f lorsque contient Lors de l'adaptation de la méthode, la valeur d'échelle s = Math.min(f/g, u/v) L'espace blanc horizontal gauche représente l'espace blanc total o = (m*v - x)/w L'espace blanc vertical représente l'espace blanc total p = ( n*g- y)/h Lorsque le mode de couverture est adapté, la valeur d'échelle s = Math.max(f/g, u/v) L'excédent horizontal gauche représente l'excédent total o = (x - m*v)/w L'excédent vertical l'excès représente l'excès total p = (y - n*g)/h Lorsque la zone d'adaptation est verticalement en haut, m = 0. Lorsqu'elle est verticalement centrée, m = 0,5 Lorsqu'elle est verticalement en bas, m = 1. Lorsqu'il est horizontalement à gauche, n = 0. Lorsqu'il est centré horizontalement, n = 0,5. Lorsqu'il est positionné horizontalement à droite, n = 1 par rapport à l'optimisation de la mémoire d'adaptation de la couche entière (w3*h3)/(v1*g1) >= w*h/(v*g)<img> exemple d'implémentation
Lorsque la largeur maximale est w/v et la hauteur maximale est h/g, cela correspond à contenir une adaptation.
Lorsque min-width est défini sur w/v et min-height sur h/g, cela correspond à l'adaptation de la couverture.
Lorsque la largeur est w/v et la hauteur est h/g, cela signifie une adaptation du remplissage.
Lors de l'adaptation du contenu, si la taille originale de l'image est inférieure à max-width et max-height, utilisez zoom : 10 pour agrandir ou modifier directement la taille originale de l'image.
Lors de l'adaptation de la couverture, si la taille originale de l'image est supérieure à min-largeur et min-hauteur, utilisez zoom : .1 pour réduire ou modifier directement la taille originale de l'image.
Parce que le pourcentage en haut à gauche est relatif à la largeur de l'écran u et à la hauteur f, il correspond à m*u et n*f
Parce que le pourcentage en transformation est relatif à la largeur w1 et à la hauteur h1 de l'élément adapté, il correspond à (m*v + x)/w*w1 et (n*f + y)/h*h1
<!doctype html><html><body><style>img { /* min-width et min-height constituent un conteneur virtuel*/ min-width: 50.37037037037037% /* w3 = (w/v)*u où w = 544, v = 1080 */ min-hauteur : 7,395833333333333% ; /* h3 = (h/g)*f où h = 142, g = 1920 */ zoom : .1 ; /* x4 = m*u + (x - m*v)/w*w1 */ /* y4 = n*f + (y - n*g)/h*h1 */ position : gauche : 50 % /* m*u où m = 0,5*/ top : 50 % ; /* n*f où n = 0,5 */ transform : traduireX(-48.34558823529412%) /* (x - m*v)/w*w1 où x = 277, m = 0,5, v = 1080, w = 544 */ traduireY(378,8732394366197%); /* (y - n*g)/h*h1 où y = 1498, n = 0,5, g = 1920, h = 142 */</style><img src=http:/ /ui.qzone.com/544x142/> <!-- Élément --></body></html> exemple d'implémentation en arrière-planbackground-size est contain elle correspond à contain adaptation.background-size est cover elle correspond à l’adaptation de la couverture.background-size est 100% 100% correspond à une "adaptation de remplissage".background-position a la même p que o <!doctype html><html><body><style>div { position : absolue ; largeur : 50,37037037037037 % ; /* w3 = w/v*u où w = 544, v = 1080 */ hauteur : 7,395833333333333 % ; * h3 = h/g*f où h = 142, g = 1920 */ background: url(http://ui.qzone.com/544x142) no-repeat; /* Image d'arrière-plan en tant qu'élément*/ background-size : cover; 25,64814814814815%; u où x = 277, v = 1080 */ haut : 78,02083333333333% ; /* y3 = y/g*f où y = 1498, g = 1920 */ background-position-x : -48,34558823529412 % /* o = (x - m*v)/w où m = 0,5 , v = 1080, x = 277, w = 544*/ background-position-y : 378,8732394366197 % ; /* p = (y - n*g)/h où n = 0,5, g = 1920, y = 1498, h = 142*/}</style>< div></div> <!-- Conteneur--></body></html><svg> exemple d'implémentation
meetOrSlice de preserveAspectRatio est meet cela correspond à contenir une adaptation.meetOrSlice de preserveAspectRatio est slice cela correspond à l'adaptation de la couverture.preserveAspectRatio est none , cela correspond à une adaptation de remplissage.meetOrSlice preserveAspectRatio est ici relatif au conteneur, ce n'est pas la zone d'adaptation transform est utilisée pour le positionner, et meetOrSlice preserveAspectRatio est fixé à xMinYMin . <!doctype html><html><body><style>svg { position : absolue ; largeur : 50,37037037037037 %; hauteur : 7,395833333333333% ; /* x4 = m*v/w*w3 + (x - m*v)/ w*w1 */ /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */ haut : 0 ; gauche : 0 ; transformation : traduireX(99,26470588235294%) /* m*v/w*w3 où m = 0,5, v = 1080, w = 544 */ traduireY (676,056338028169 % ); /* n*g/h*h3 où n = 0,5, g = 1920, h = 142 */ débordement : visible ;}image SVG { transform : traduireX(-48.34558823529412%) /* (x - m*v)/w*w1 où x = 277, m = 0,5, v = 1080 , w = 544 */ traduireY(378,8732394366197%); /* (y - n*g)/h*h1 où y = 1498, n = 0,5, g = 1920, h = 142 */</style><svg viewBox=0 0 544 142 préservationAspectRatio=xMinYMin meet> <!-- Conteneur--> <image width=544 height=142 xlink:href=http://ui.qzone.com/544x142/> <!-- Élément --></svg></body></html> Outils auxiliairesIl est difficile de calculer manuellement des pourcentages et d'écrire du CSS. Vous pouvez utiliser des outils tels que Sass pour le simplifier.
La largeur v et la hauteur g du brouillon de conception sont généralement des constantes au niveau de la page.
Lisez simplement l'abscisse x , l'ordonnée y , la largeur w et la hauteur h de chaque élément dans le brouillon de conception, puis l'outil génère du CSS.
Désormais, ma mère n'a plus à se soucier de mes problèmes de restauration ou d'adaptation à l'écran.
traitement de texte Le texte est fixe ou une seule ligne n'est pas fixe, la balise text svg peut le gérer
Si le texte est fixe ou si une seule ligne n'est pas fixe, vous pouvez également convertir le texte en images.
Plusieurs lignes de texte ne sont pas corrigées. Vous pouvez utiliser foreignObject de svg pour intégrer div
Comparaison des forfaits
Il existe de nombreuses solutions d'adaptation d'écran. Quelle méthode devez-vous choisir pour réaliser une adaptation de couche complète ou une adaptation rationalisée ?
| plan | Zoom | position | Zoom du texte | compatible |
|---|---|---|---|---|
| pourcentage de remplissage supérieur | Je ne peux qu'être indulgent | ✓ | ✗ | ✓ |
| fenêtre | ✓ | ✗ | ✓ | Le support est complexe |
| ajustement à l'objet | ✓ | ✓ | ✗ | Mobile Android 4.4.4+ |
| rapport de préservation svg | ✓ | ✓ | ✓ | Mobile Android 3.0+ |
| (max/min)-(largeur/hauteur) | ✓ | ✓ | texte fixe | ✓ |
| taille de l'arrière-plan | ✓ | ✓ | Texte en image | ✓ |
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.