Práctica adaptativa del subprograma WeChat en modo horizontal (unidad de tamaño vmin)
Configure "pageOrientation" en el archivo json de la página de destino: "paisaje" puede alcanzar la pantalla completa. Este parámetro está predeterminado en "vertical" (la configuración de "auto" significa conversión automática siguiendo el móvil). sistema telefónico.
Cabe señalar que después de configurar la pantalla horizontal, la unidad rpx ya no tiene efecto. Algunas personas sugieren usar px, pero esto no puede lograr un diseño adaptable, por lo que debemos introducir una nueva unidad: vmin.
vmin: El valor mínimo entre el ancho de la ventana gráfica vw y la altura vh.
De hecho, si hay vmin, naturalmente habrá vmax. vmax significa el valor máximo entre el ancho de la ventana gráfica vw y la altura vh.
Todos entendemos que vw es 1 del ancho actual del dispositivo, es decir, 1vw es 1 del ancho del dispositivo y 50vw es 50 del ancho del dispositivo (vh es lo mismo)
¿Cómo entiendes vmin? Divídalo y considérelo como v min. El v anterior sigue siendo v en vw, y min es el valor mínimo de w y h. De esta manera, vmin puede entenderse como 1 del lado más corto del dispositivo actual (. vmax es el lado más largo 1), ¿lo entiendes inmediatamente? 50vmin es la mitad del lado más corto y 100vmin es todo el lado más corto.
¿Cuándo se utilizarán estas dos unidades?
Caso 1: Un cuadrado que siempre se puede mostrar en la pantalla (como se muestra en el área amarilla a la izquierda en la imagen de arriba) se puede definir de la siguiente manera:
Caso 2 : Un cuadrado con el lado más largo de la pantalla como longitud lateral (como se muestra en el área amarilla en el lado derecho de la imagen de arriba) se puede definir así:
Por lo tanto, si usamos vmin como La unidad de longitud en el mini programa, podemos garantizar que todos los elementos se puedan mostrar normalmente y se puedan adaptar a pantallas de varios tamaños.
Pero en este caso, ¿no sería muy problemático escribir CSS? Queremos implementar un botón con 200rpx * 50rpx en modo vertical. Si se usa vmin como unidad en modo horizontal, ¿cuáles son el ancho y el alto? Esto implica la conversión de unidades de rpx y vmin, por lo que necesitamos definir una función de conversión para ayudarnos a manejar esta lógica de conversión.
Este artículo presenta cómo usar SCSS en el subprograma WeChat. Aquí usamos SCSS para definir esta función:
Entonces, en la página de pantalla horizontal, podemos definir un botón como este. es adaptativo:
El resultado final de la renderización es:
¿Has dejado de aprender?
Busque "Panda Activity Assistant" en WeChat para ingresar a la experiencia.
La interfaz de lotería en el mini programa utiliza el modo horizontal. Puede ingresar al mini programa para experimentarlo. Para operaciones específicas, consulte "Cómo hacer una herramienta de pase de lista de lotería".