Aula pequeña (tamaño adaptado)
Como todos sabemos, el problema de la adaptación de los terminales móviles es una tarea ardua y de largo plazo. También existen en el mercado diversas soluciones de adaptación, que se actualizan constantemente. Sin embargo, la mayoría de las soluciones todavía se utilizan, lo que demuestra que diferentes soluciones son prácticas para diferentes necesidades. Este artículo analizará brevemente varias soluciones comunes que el autor ha probado y aplicado en entornos de producción.
Hasta ahora, he probado varias soluciones de adaptación de tamaño móvil, desde la unidad de porcentaje inicial hasta rem, vh, vw, y luego las uso junto con el diseño flexible. La unidad de adaptación todavía es. constantemente optimizando y probando nuevas soluciones, y también está intentando integrar este tipo de soluciones. Después de aplicarlo al entorno de producción, se lograron algunos pequeños resultados y también se descubrieron algunas pequeñas deficiencias. A continuación se analizarán brevemente estas soluciones respectivamente y se compartirán algunos de los problemas y escenarios de uso que encontró el autor al usarlas.
La unidad de porcentaje es la unidad de tamaño más rápida con la que entra en contacto cuando se aprende el front-end. El porcentaje se asignará según el tamaño del elemento principal. Si el elemento principal es un cuadro de 200 px * 400 px y el elemento secundario está configurado en ancho: 80%, el ancho se establecerá en 160 px. Lo mismo ocurre con la altura. El porcentaje se calcula en función del tamaño del elemento principal. El porcentaje es muy útil cuando se determina el tamaño del elemento principal. Entonces, ¿qué pasa si el elemento principal no tiene un tamaño fijo y se expande de acuerdo con el tamaño del elemento secundario? Luego encontraremos que la altura real mostrada es 0, pero el ancho no es 0. Si el elemento principal no establece el tamaño, su ancho heredará el ancho de su nivel anterior, pero la altura no, y el valor predeterminado es 0. Luego, el porcentaje establecido por nuestro elemento hijo, el valor del ancho es correcto y el alto es 0. Debido a que el porcentaje se calcula en función del tamaño del elemento principal, si el ancho del elemento principal no es 0, se puede calcular un valor distinto de cero, y si la altura es 0, el valor calculado solo puede ser 0. Por lo tanto, cuando el elemento principal no tiene un tamaño fijo y necesita ser expandido por elementos secundarios, la altura será 0 cuando se use un porcentaje. Por lo tanto, el uso de porcentajes de altura debe usarse con precaución. Entonces, si usamos porcentajes para adaptarnos a pantallas de teléfonos móviles de diferentes tamaños y asegurarnos de que el diseño de la interfaz de usuario se pueda reproducir en la proporción correcta en pantallas de teléfonos móviles de todos los tamaños, entonces debemos establecer el tamaño específico en el elemento raíz, de modo que el porcentaje Solo entonces podremos calcularlo nivel por nivel en función de este tamaño.
De hecho, podemos encontrar intuitivamente que si nuestro requisito de interfaz de usuario es una lista de desplazamiento infinitamente cargable, entonces la altura específica no se puede establecer en el elemento raíz y el porcentaje no será válido en la altura. Entonces solo podemos establecer la altura específica del elemento de la lista, pero esto no puede garantizar que la proporción de los elementos de la lista en diferentes tamaños sea consistente con el diseño de la interfaz de usuario. Esta es una deficiencia obvia de la adaptación de unidades porcentuales. Sin embargo, si el diseño de la interfaz de usuario no requiere que la proporción de elementos individuales sea coherente con la interfaz de usuario, aún se puede utilizar la unidad porcentual.
Entonces, como la unidad porcentual no puede cubrir nuestras necesidades, comenzamos a buscar nuevas soluciones. En este momento, es fácil encontrar la unidad rem de la que todos han estado hablando. Rem también es una de las muchas unidades de tamaño admitidas en la web. Entonces, ¿cuál es la diferencia entre em y rem? em se basa en el atributo de tamaño de fuente del elemento principal, mientras que rem se basa en el atributo de tamaño de fuente del elemento raíz. Si el elemento principal está configurado en tamaño de fuente: 50px, entonces 1em == 50px del elemento secundario. . Y si el elemento secundario no establece el tamaño de fuente, heredará el tamaño de fuente del elemento principal de forma predeterminada, entonces los elementos secundarios del elemento secundario también satisfacen 1em == 50px. Entonces podemos entender intuitivamente que si el elemento secundario establece su propio tamaño de fuente, entonces la ecuación anterior ya no se cumple. Entonces, si el elemento padre necesita establecer su propio tamaño de fuente y su elemento hijo quiere usar em para establecer el tamaño en función del elemento abuelo (el elemento padre del elemento padre), se encontrará en una situación incómoda.
Entonces, ¿cuál es la diferencia con rem? Mencionamos anteriormente que rem se basa en el tamaño de fuente del elemento raíz. Si el elemento raíz está configurado en tamaño de fuente: 50px, entonces usamos ancho: en cualquiera de sus elementos secundarios o elementos secundarios anidados de varios niveles 1rem. , obtendrá la respuesta de ancho: 50px, independientemente del valor establecido por el tamaño de fuente del elemento principal. Eso resuelve la situación embarazosa mencionada anteriormente para la unidad em. Sin embargo, cabe señalar que debido a que el tamaño de fuente se puede heredar y transmitir nivel por nivel, es mejor restablecer el tamaño de fuente al valor predeterminado en el elemento de primer nivel debajo del elemento raíz. La razón de esto es que si aparece un nodo de texto durante el proceso de anidamiento, pero no se establece el tamaño de fuente correspondiente, entonces el tamaño de fuente del nodo de texto será la fuente establecida por el elemento raíz -size, la fuente será. ser muy grande. Si el tamaño de fuente requerido para la mayoría de los nodos de texto es el mismo, entonces será inconveniente restablecer el valor del tamaño de fuente en cada nodo de texto. Por lo tanto, si el elemento secundario de primer nivel debajo del elemento raíz establece el tamaño de fuente, todos los nodos de texto heredarán este valor de tamaño de fuente, no el elemento raíz. Por lo tanto, no es necesario establecer el tamaño de fuente en cada nodo de texto.
Después de presentar brevemente las dos unidades em y rem, descubrimos que em y rem tienen sus escenarios de uso adecuados, pero en comparación, rem puede ser más adecuado para el plan de adaptación general. Entonces, ¿cómo debemos determinar el tamaño de 1rem? Hay muchas soluciones definitivas en la información en línea, principalmente dos métodos de cálculo básicos.
El primero es determinar en función del rango de tamaño, es decir, entre los múltiples tamaños en el terminal móvil, se dividen múltiples rangos y se determina un valor fijo en cada rango. La implementación específica es combinar consultas de medios y establecer un valor fijo para tamaños de pantalla en diferentes rangos, para adaptarse.
El otro método consiste en calcular en función del ancho de la pantalla y el ancho del borrador del diseño para obtener un valor numérico. Este cálculo puede obtener un valor único correspondiente en todos los tamaños. La implementación específica es obtener el ancho de la pantalla del dispositivo a través de js y luego convertirlo al ancho del borrador del diseño, calcular un valor y luego configurarlo dinámicamente en el elemento raíz a través de js.
Estas dos ideas son generalmente las mismas que las mencionadas anteriormente. Sin embargo, diferentes empresas tienen ideas diferentes para cálculos de conversión específicos. Las conversiones específicas se pueden encontrar aquí. El autor utiliza la segunda solución, que es convertir de acuerdo con el ancho de la pantalla y el ancho del borrador del diseño. A continuación se presentará cómo convierte el autor.
El método de cálculo de conversión del autor en realidad es consistente con el método de cálculo del teléfono móvil de NetEase. Sin embargo, no entendí tanto como NetEase cuando se me ocurrió este método de cálculo de conversión. Es muy conveniente calcular de esta manera. Debido a que el borrador de diseño que obtuve tiene un ancho de 750 e intenté convertir 750 px a 75 rem al principio, luego el tamaño de 1 rem del dispositivo real se obtiene usando el ancho de la pantalla para dividir 75 para obtener 1 rem (dispositivo real), es decir, 1rem (dispositivo real) = w (ancho de pantalla)/75, pero luego lo probé y descubrí que el cálculo de 1rem = 10px (borrador de diseño) no será válido en Chrome. Chrome solo puede alcanzar un mínimo de 12px, y el real. El 1rem calculado es mucho más pequeño que 12px, debido al teléfono móvil. El ancho está principalmente entre 360 y 480, por lo que el 1rem calculado (dispositivo real) es definitivamente menor que 12px. Más tarde, se cambió a 1rem=100px (borrador de diseño), que es 750px=7,5rem.
La razón por la que se usa 1rem=10px o 1rem=100px es simplemente porque es muy conveniente al cortar el tamaño del borrador del diseño. Si el borrador del diseño tiene un elemento que es 130px * 80px, entonces solo necesita configurar 1.3rem *. 0,8 rem. En el cálculo, solo necesitas dividir 100. Puedes calcularlo directamente al cortar la imagen y no necesitas usar una calculadora para calcular uno por uno. Más tarde, después de usar este plan durante mucho tiempo, vi. el enlace de arriba. Ese blog introdujo el mismo método en la versión móvil de NetEase, y pensaron en ello mucho más de lo que yo pensaba. Sólo entonces me di cuenta de que era un gato ciego y un ratón muerto.
Esta solución ha sido mi principal elección para la adaptación de terminales móviles durante mucho tiempo, hasta que encontré el problema de que al usar rem para cargar dinámicamente imágenes de red en la vista web de ios, las imágenes no se podían mostrar. Después de la investigación, se descubrió que la imagen de red obtenida después de llamar a través de la interfaz js no podía mostrar correctamente la altura establecida cuando se cargaba. Fue entonces cuando comencé a pensar si había algo mejor que combinar con rem para hacerlo mejor. Porque cuando estaba trabajando en h5 en WeChat antes, nunca encontré un error de proporción al usar rem. En mi opinión, rem aún puede adaptarse bien a la mayoría de las interfaces. Sin embargo, también se descubrieron algunos pequeños problemas durante el uso. Debido a que el cálculo unitario de rem se basa en el ancho de la pantalla, que es 7,5, no se puede garantizar que el valor de 1rem (dispositivo real) sea un número entero, por lo que hay algunos pequeños. espaciado en el borrador del diseño, por ejemplo, si es inferior a 10px, escribiremos 0.06rem en CSS, pero debido a que 1rem en sí no es un número entero, habrá un ligero espacio al realizar cálculos de punto flotante. Pero si el espaciado se realiza en px, entonces el rem se volverá inexacto, especialmente en el ancho, 7.5rem en sí es un ancho de pantalla, pero después de agregar px, puede calcular cuántos rem quedan después de eliminar px.
Luego comencé a adoptar completamente el diseño flexible (flex). Después de usar el diseño flexible, descubrí que combinar flex y rem puede funcionar mejor. Porque si el espaciado usa px y algunos elementos usan rem, entonces el resto se puede estirar directamente con flex y no hay necesidad de preocuparse por cuántos rem quedan después de eliminar px. El terminal móvil es básicamente compatible con la función flex, por lo que se puede usar directamente, pero es necesario agregar el prefijo del kernel correspondiente. El uso de flex optimiza enormemente la escritura del diseño.
Más tarde descubrí que el par vw y vh. vw en realidad se basa en window.innerWidth y vh se basa en window.innerHeight. 100vw es igual al ancho del rango visible de la pantalla y 100vh es igual a la altura del rango visible de la pantalla. En el lado móvil, es el tamaño de la vista web. Y descubrí que vw es muy similar a la situación en la que 750px = 100rem (borrador de diseño). En este caso, el tamaño de 1rem es el mismo que el tamaño de 1vw, por lo que el uso de vw es básicamente similar al uso de rem. . Además, el ancho de una pantalla es igual a 100, vw también es muy similar a un porcentaje, pero vw se basa en el ancho de la pantalla y no en el elemento principal como un porcentaje, por lo que logra un muy buen efecto en Adaptación horizontal. ¿Pero qué pasa con vh? Porque a veces es necesario crear una interfaz H5 que tenga una pantalla de ancho y alto, entonces entra en juego vh. Normalmente, 100vh es la altura de una pantalla. Sin embargo, encontré un problema al usar vh, que es como una página de registro H5 de una pantalla con etiquetas de entrada que requieren que los usuarios completen información. Establezca la altura de la imagen de fondo en 100vh. Cuando el cuadro de entrada esté enfocado y aparezca el teclado del teléfono móvil, la imagen de fondo se comprimirá porque después de que aparezca el teclado del teléfono móvil, la altura visible de la pantalla es la altura de. la pantalla menos la altura del teclado del teléfono móvil, por lo que 100vh se convertirá en esta altura en lugar de la altura de una pantalla. Este problema es el único que encontré al usar vw y vh. Todavía no he encontrado una buena solución.
Si el teclado no aparece y se requiere la altura de una pantalla, se recomienda utilizar vh. VW aún no ha encontrado ningún problema.
Se han probado varios métodos en términos de adaptación. Cada método tiene sus ventajas y desventajas, pero al seleccionarlos y combinarlos según el escenario de uso, se puede lograr un efecto de adaptación bastante bueno.