El diseño es genial, esta vez realmente se basa en el borrador del diseño, porque ahora, ¡cualquier máquina es una máquina estándar según el borrador del diseño! Compañeros desarrolladores, ¡ahora pueden leer las anotaciones del borrador del diseño directamente!
Adaptación de pantallaLa adaptación de pantalla debe referirse a la relación de adaptación entre el área de adaptación del contenido y el intervalo de pantalla.
La adaptación a pantalla única incluye contener, cubrir o rellenar, y la adaptación a pantalla múltiple suele basarse en el ancho.
contener y cubrir también necesitan posicionamiento para manejar los espacios en blanco y el exceso de contenido.
Diferentes contenidos en el mismo H5 a menudo utilizan diferentes métodos de adaptación, es decir, capas.
CSS preferidoPara problemas de rendimiento como la adaptación de la pantalla, si se puede implementar con CSS, se debe implementar con CSS.
Adaptación de toda la capaPara garantizar que los elementos de cada capa se escalen sincrónicamente sin distorsión, el área de adaptación de cada capa debe ser igual al tamaño del borrador del diseño.
La implementación directa es construir un contenedor del mismo tamaño que el área de adaptación y adaptar toda la capa.
En el contenedor pueden haber varios elementos con el mismo método de adaptación.
Tome la implementación svg como ejemplo:
<!doctype html><html><body><style>.layer { posición: absoluta; arriba: 0 izquierda: 0; ancho: 100%; altura: 100%;}</style><!-- relleno - -><svg clase=capa viewBox=0 0 1080 1920 preserveAspectRatio=none> <!-- contenedor--> <rect x=0 y=0 ancho=1080 altura=1920 fill=rgba(96,96,96,.08)/> <!-- elemento--></svg><!-- contiene centro--><svg clase=capa viewBox=0 0 1080 1920 preserveAspectRatio=xMidYMid meet> <!-- contenedor--> <rect x=0 y=233 ancho=1080 height=1407 fill=#1565C0/> <!-- elemento--></svg><!-- contiene fondo--><svg class=layer viewBox=0 0 1080 1920 preserveAspectRatio=xMidYMax meet> <!- - Contenedor--> <rect x=444 y=1779 ancho=191 alto=39 fill=#1565C0/> <!-- Elemento--></svg></body></html>Efecto real:
La adaptación de toda la capa es simple de implementar y los valores del borrador del diseño se leen directamente durante el desarrollo, lo que puede satisfacer las necesidades de la mayoría de las páginas estáticas.
Pero cuando hay muchas animaciones h5, hay que considerar la fluidez de la animación y el rendimiento de la página.
Utilice elementos reemplazables como <img> <object> <svg> como contenedores y utilice imágenes de fondo como elementos.
Existen fallas de rendimiento al aplicar animaciones CSS:
Para mejorar el rendimiento de estas implementaciones, debemos centrarnos en la animación del contenedor y reducir el tamaño del contenedor. Es mejor que sea igual al área total mínima de todos los elementos en una capa para lograr una adaptación optimizada.
Adaptación simplificada fórmulaPara conocer el proceso de derivación, consulte Derivación de la fórmula de adaptación de pantalla en capas H5.
El ancho del borrador del diseño es v y la altura es g. La coordenada horizontal del elemento antes de la adaptación es x. La coordenada vertical es y. La altura es h. es x3 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1 ordenada y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1 ancho w3 = (w/v)*u alto h3 = (h/g)*f cuando contiene Al adaptar el método, el valor de escala s = Math.min(f/g, u/v) El espacio en blanco izquierdo horizontal representa el espacio en blanco total o = (m*v - x)/w El espacio en blanco vertical representa el espacio en blanco total p = ( n*g- y)/h Cuando se adapta el modo de cobertura, el valor de escala s = Math.max(f/g, u/v) El exceso horizontal izquierdo representa el exceso total o = (x - m*v)/w El vertical el exceso representa el exceso total p = (y - n*g)/h Cuando el área de adaptación está verticalmente en la parte superior, m = 0. Cuando está verticalmente centrada, m = .5. m = 1. Cuando está horizontalmente a la izquierda, n = 0. Cuando está horizontalmente centrado, n = .5. Cuando está horizontalmente a la derecha, n = 1 en comparación con la optimización de la memoria de adaptación de toda la capa (w3*h3)/(v1*g1) >= w*h/(v*g)<img> ejemplo de implementación
Cuando el ancho máximo es w/v y la altura máxima es h/g, corresponde a una adaptación de contenido.
Cuando el ancho mínimo se establece en w/v y la altura mínima se establece en h/g, corresponde a la adaptación de la cubierta.
Cuando el ancho es w/v y el alto es h/g, significa adaptación de relleno.
Durante la adaptación de contención, si el tamaño original de la imagen es menor que el ancho máximo y el alto máximo, use zoom: 10 para ampliar o modificar directamente el tamaño original de la imagen.
Durante la adaptación de la portada, si el tamaño original de la imagen es mayor que el ancho y el alto mínimos, use zoom: .1 para reducir o modificar directamente el tamaño original de la imagen.
Debido a que el porcentaje en la parte superior izquierda es relativo al ancho de la pantalla u y la altura f, corresponde a m*u y n*f
Debido a que el porcentaje en transformación es relativo al ancho w1 y alto h1 del elemento adaptado, corresponde a (m*v + x)/w*w1 y (n*f + y)/h*h1
<!doctype html><html><body><style>img { /* min-width y min-height constituyen un contenedor virtual*/ min-width: 50.37037037037037% /* w3 = (w/v)*u donde; w = 544, v = 1080 */ altura mínima: 7,395833333333333%; /* h3 = (h/g)*f donde h = 142, g = 1920 */ zoom: /* x4 = m*u + (x - m*v)/w*w1 */ /* y4 = n*f + (y - n*g)/h*h1 */ posición: absoluta; 50% /* m*u; donde m = .5*/ arriba: 50%; /* n*f donde n = .5 */ transformar: traducirX(-48.34558823529412%) /* (x - m*v)/w*w1 donde x = 277, metro = .5, v = 1080, w = 544 */ traducirY(378.8732394366197%); /* (y - n*g)/h*h1 donde y = 1498, n = .5, g = 1920, h = 142 */}</style><img src=http:/ /ui.qzone.com/544x142/> <!-- Elemento --></body></html> ejemplo de implementación en segundo planobackground-size es contain corresponde a contener la adaptación.background-size es cover corresponde a la adaptación de la cobertura.background-size es 100% 100% corresponde a "adaptación de relleno".background-position tiene el mismo p que o <!doctype html><html><body><style>div { posición: absoluta; ancho: 50.37037037037037%; /* w3 = w/v*u donde w = 544, v = 1080 */ alto: 7.39583333333333%; * h3 = h/g*f donde h = 142, g = 1920 */ fondo: url(http://ui.qzone.com/544x142) no-repeat; /* Imagen de fondo como elemento*/ tamaño de fondo: izquierda: 25.64814814814815%; u donde x = 277, v = 1080 */ arriba: 78,02083333333333%; /* y3 = y/g*f donde y = 1498, g = 1920 */ posición-de-fondo-x: -48,34558823529412%; , v = 1080, x = 277, w = 544*/ posición-fondo-y: 378,8732394366197%; /* p = (y - n*g)/h donde n = 0,5, g = 1920, y = 1498, h = 142*/}</style>< div></div> <!-- Contenedor--></body></html><svg> ejemplo de implementación
meetOrSlice de preserveAspectRatio meet corresponde contener la adaptación.meetOrSlice de preserveAspectRatio es slice corresponde a la adaptación de la cubierta.preserveAspectRatio es none , corresponde a la adaptación de relleno.meetOrSlice de preserveAspectRatio aquí es relativo al contenedor, no se usa transform para posicionarlo, y meetOrSlice de preserveAspectRatio se fija en xMinYMin . <!doctype html><html><body><style>svg { posición: absoluto; ancho: 50.37037037037037%; alto: 7.39583333333333% /* x4 = m*v/w*w3 + (x - m*v)/ w*w1 */ /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */ arriba: 0; izquierda: 0; transformar: traducirX(99.26470588235294%) /* m*v/w*w3 donde m = .5, v = 1080, w = 544 */ traducirY (676,056338028169%); /* n*g/h*h3 donde n = 0,5, g = 1920, h = 142 */ desbordamiento: visible;}imagen svg { transformar: traducirX(-48.34558823529412%) /* (x - m*v)/w*w1 donde x = 277, m = .5, v = 1080 , w = 544 */ traducirY(378.8732394366197%); /* (y - n*g)/h*h1 donde y = 1498, n = .5, g = 1920, h = 142 */}</style><svg viewBox=0 0 544 142 preserveAspectRatio=xMinYMin meet> <!-- Contenedor--> <ancho de imagen=544 alto=142 xlink:href=http://ui.qzone.com/544x142/> <!-- Elemento --></svg></body></html> herramientas auxiliaresEs problemático calcular porcentajes manualmente y escribir CSS. Puede utilizar herramientas como sass para ayudar a simplificarlo.
El ancho v y el alto g del borrador de diseño son generalmente constantes a nivel de página.
Simplemente lea la abscisa x , la ordenada y , el ancho w y el alto h de cada elemento en el borrador del diseño, y luego la herramienta genera CSS.
Ahora mi madre ya no tiene que preocuparse por mis problemas de restauración o de adaptación de pantalla.
procesamiento de textos El texto es fijo o una sola línea no es fija, la etiqueta text svg puede manejarlo
Si el texto es fijo o una sola línea no es fija, también puedes convertir el texto en imágenes.
Varias líneas de texto no son fijas. Puede utilizar foreignObject de svg para incrustar div
Comparación de planes
Existen muchas soluciones de adaptación de pantalla. ¿Qué método debería elegir para lograr una adaptación de capa completa o una adaptación simplificada?
| plan | Zoom | posición | zoom de texto | compatible |
|---|---|---|---|---|
| porcentaje de relleno superior | Sólo puede ser indulgente | ✓ | ✗ | ✓ |
| ventana gráfica | ✓ | ✗ | ✓ | El soporte es complicado |
| ajuste de objeto | ✓ | ✓ | ✗ | Móvil Android 4.4.4+ |
| svg preservarRelación | ✓ | ✓ | ✓ | Móvil Android 3.0+ |
| (máx/mín)-(ancho/alto) | ✓ | ✓ | texto fijo | ✓ |
| tamaño de fondo | ✓ | ✓ | Texto a imagen | ✓ |
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.