" Cada problema siempre tiene una solución: simple, conveniente y, por supuesto, erróneo ". - Henry Louis Mencken.
La esencia del problema
A primera vista, la implementación del diseño adaptativo puede parecer una "búsqueda lineal" con un campo de maniobras bastante pequeño.
Asignamos las clases necesarias, cambiamos los tamaños, la posición o el orden de los elementos según sea necesario, y el asunto parece estar hecho.
Pero de vez en cuando, al analizar el diseño en proyectos completamente completados, involuntariamente te encuentras pensando que, en teoría, todo se ve mucho mejor que en la práctica. Al principio, css se ve tan bien arreglado y lógico como sea posible, pero cuanto más es, más a menudo se inicia, especialmente después de varias ediciones con grandes intervalos de tiempo.
Cuando se enfrentan a soluciones de diseño inusuales, las consultas de medios se vuelven "más gruesas", aparecen puntos de interrupción no estándar y, al cambiar los detalles del diseño, hacer cambios en el diseño se convierte en un trabajo bastante difícil.
Cualquier corrección del cliente o diseñador, y el código CSS debe ser editado en todas las consultas de medios (especialmente si es el CSS de otra persona y están dispersos por todo el código en diferentes lugares con una secuencia ilógica).
Lo que a menudo conduce a una situación en la que usted no tiene el control de la situación y existe la tentación de recurrir a métodos "duros", como la directiva! Importante, o anidamiento. El código se vuelve aún menos personalizable y en algún lugar de miles de líneas aparecen líneas que ya no son necesarias y solo (aunque ligeramente) ralentizan el navegador.
Solución
Parte 1. Relatividad absoluta
La idea principal y más importante de este artículo es que cuanto menos código CSS escribamos, más fácil será controlarlo.
La esencia del método de adaptabilidad inversa es hacer que cada elemento sea lo más adaptable posible, y luego reducir gradualmente su capacidad de adaptarse al tamaño de la pantalla.
Entonces, el paso principal hacia esto es el uso de unidades absolutas de medida: px, em, rem solo dentro de las consultas de medios (con raras excepciones).
Fuera de las consultas de medios, es mejor que usemos solo unidades de medida de ventana gráfica relativas: vw, vh, vmax y porcentaje%.
Mediremos las etiquetas raíz de los bloques y el texto en unidades de ventana gráfica, mientras que para las secundarias, es más conveniente considerar el tamaño como un porcentaje de la matriz.
Parece lógico: permita que los elementos se adapten al tamaño de la pantalla de forma independiente, sin sobrescribir la configuración de cada punto de interrupción.
Cada vez, el trabajo debe comenzar con la preparación, independientemente del tamaño del proyecto.
Lo primero que haremos es medir nuestro diseño de muestra y anotar todas las dimensiones que necesitamos.
1920 es el ancho principal de nuestro diseño, todas las demás dimensiones horizontales dependerán de él.
930 es la altura principal de nuestro diseño (la altura estimada del área de la página visible al mismo tiempo en la pantalla), todos los tamaños verticales dependerán de ello.
1400 es el ancho del contenedor en el que se empaquetará todo el contenido de la página.
A continuación, creamos las clases principales para el contenedor y el texto, de la siguiente manera:
(Anchura calculada / amplitud del diseño) * 100, es decir en nuestro caso
(1400/1920) * 100 = 72,9
El resultado, como se planificó anteriormente, se escribe en unidades de ventana gráfica, es decir, ancho de vista:
.container { width: 72.91vw; }
Haremos lo mismo para el texto, con la excepción de que en lugar de vw usamos vmax - para usar el tamaño máximo de pantalla y no el ancho.
(55/1920) * 100 = 2,86
.page__title { font-size: 2.86vmax; }
Además, para elementos que tienen la misma altura y anchura (elementos cuadrados y redondos), también debe usar unidades vmax para mantener las proporciones. A continuación, puede comenzar a componer y dibujar la cuadrícula.
Para los bloques que deben establecerse en altura, utilizamos la misma fórmula de recálculo en la ventana gráfica, pero ahora, en lugar del ancho, nos basaremos en la altura de la pantalla y agregaremos vh (altura de vista) al resultado. Además, aplicaremos vh a las sangrías superiores e inferiores.
(300/1920) * 100 = 15,62;
(60/1920) * 100 = 3,12;
.main__block { width: 15.62vmax; height: 15.62vmax; margin-top: 3.12vh; margin-right: 3.12vw; }
Y el ancho de los bloques anidados, como dije antes, lo calcularemos como un porcentaje usando base flexible.
(970/1920) * 100 = 50,52;
(16/1920) * 100 = 0,83;
.main-menu { width: 50.52vw; } .main-menu__item { flex-basis: calc(100% / 4 - 0.83vw); }
Parte 2. Adaptabilidad inversa
Los bloques se comportan de la manera más adaptativa posible, pero son demasiado adaptativos:
el texto se vuelve ilegible en pantallas pequeñas y los bloques están listos para reducirse hasta el infinito, en cualquier pantalla.
Ahora es el momento de la adaptabilidad hacia atrás.
Usando consultas de medios, reemplazamos las unidades relativas con las absolutas.
Em para tamaño de fuente;
Px para la altura del bloque;
Para el ancho del contenedor y algunos bloques, continuaremos usando unidades relativas pero las cambiaremos a%:
@media (max-width: 767px) { .page__title { font-size: 4em; } .main__block { width: 300px; height: 300px; } .some__block { width: 100%; height: 300px; } .... }
Por lo tanto, con una sola solicitud de medios, cambiamos las unidades de puerto de vista a absoluto, deteniendo así parcialmente el proceso de adaptación.
Una ventaja importante: ahora, debido a las unidades de medida relativas, el diseño se verá igual tanto en la pantalla de la computadora portátil como en la pantalla de un enorme panel de plasma.
Parte 3. Conveniencia y una pizca de programación
A pesar de la versatilidad de este método, continuamos haciendo mucho trabajo "detrás de escena", a saber, usar la calculadora sin parar para traducir píxeles en las unidades de la ventana de visualización "manualmente". Para automatizar este proceso, debemos seguir algunos pasos simples usando Scss:
1. Escribir dimensiones principales a variables
$full-width: 1920; $work-width: 80; $screen-height: 720;
2. Escriba una función para recalcular automáticamente los píxeles en la ventana gráfica
@function vmax($pixels, $context: $full-width) { @return
y dos similares para vw y vh.
Ahora podemos escribir de forma segura todos los tamaños en la forma en que se indican en el diseño de ejemplo y no considerar esto "manualmente":
.main__block { width: vmax(300); height: vmax(300); margin-top: vh(60); margin-right: vw(60); }
Por lo tanto, ahorramos tiempo y esfuerzo.
Arriba en las consultas de medios, utilizamos unidades em para indicar tamaños de fuente,
por lo tanto, sería bueno escribir una función para ellos también, para observar la claridad y el orden:
$browser-context: 16; @function em($pixels, $context: $browser-context) { @return
Creo que es bastante obvio que estas funciones se escribirán una vez y luego pueden "moverse" de un proyecto a otro, junto con las variables creadas, así como algunas clases dependiendo de ellas.
Lo único que tendrá que hacer al comenzar a trabajar en un nuevo proyecto es nuevamente "tomar la medida" del diseño y reemplazar los valores en estas variables.
Conclusión
- Obtenemos un mínimo de código innecesario disperso en diferentes extremos y archivos.
- Aumentamos nuestro control sobre ello.
- Aceleramos el proceso de escritura y edición de código.
- Simplifique su vida, como lo demuestra la práctica: menos código = menos problemas.