Media Queries: Adaptación de Diseño a Dispositivos Móviles y Tablets

En esta parte necesitamos realizar un análisis de lo que hemos trabajado para identificar en qué partes y en qué dimensiones debemos cambiar la posición de ciertos objetos. Entonces vamos a la vista que nos arroja el navegador.

Analizando nuestro proyecto

Como ya sabes, debemos tener un mínimo de diseños para tres versiones: celular, tablet y escritorio. Es decir, tres archivos CSS linkeados en nuestro archivo index.html. Los colocamos en el siguiente orden:

1. Hoja de estilos principales (styles.css)
2. Hoja de estilos para tablet (tablet.css)
3. Hoja de estilos para desktop (desktop.css)

Como puedes ver, se agregan de menor a mayor tamaño, porque estamos trabajando desde Mobile First. En este caso hay pocos elementos en nuestro proyecto, por lo que agregar una vista más nos bastará para obtener buenos resultados.

    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="./css/tablet.css" media="(min-width: 930px)">

Es importante que especifiquemos en la propiedad media, el ancho mínimo que necesita tener la pantalla para descargar este archivo. De esta manera evitaremos que el usuario tenga que descargar todos los archivos cuando solo va a usar uno.

Ahora vamos a trabajar en las secciones que necesitan unos cuantos ajustes.

Ajustando la sección de tablas

Al pasar a pantallas más grandes se genera demasiado espacio alrededor de las tablas. Colocarlas una al lado de otra ayuda a tener menos scroll vertical y una vista más cómoda para el usuario.

Para ello:

• Llamamos la clase del contenedor de las tablas con .main-tables-container.
• Usamos display: flex para que las tablas se acomoden juntas.
• Ajustamos el ancho a 930px para que no crezca más de eso.
• Centramos las tablas con margin: 0 auto.

.main-tables-container {
    display: flex;
    width: 930px;
    margin: 0 auto;
}

Ajustando la sección de beneficios

Tenemos el mismo problema que el anterior. Hay demasiado espacio sobrante en el que debemos reacomodar los elementos.

Para ello:

• Llamamos la clase contenedora de las tarjetas con .product-cards–container.
• Las acomodamos al ancho de la caja con display: flex.
• Acomodamos las cajas en columnas con flex-wrap: wrap.
• Limitamos el crecimiento de la caja en 930px. Así nos aseguramos que no se vayan a crear más de dos columnas.
• Centramos las tablas con margin: 0 auto.

.product-cards--container {
    display: flex;
    flex-wrap: wrap;
    width: 930px;
    margin: 0 auto;
}

Ajustando la sección de planes

Como podemos observar, las tarjetas de planes se quedan a la izquierda de la pantalla al superar dimensiones de 930px. Esto se debe a que usa display: flex para funcionar.

Por lo que sin cambiarlo, agregamos una simple línea de código a la clase del mismo contenedor:

• Centra el contenido con justify-content: center.

.plans-container--slider {
    justify-content: center;
}

Esta parte resultó mucho más sencillo, ¿verdad? Aplicamos muy pocas líneas de CSS y nos tomó poco tiempo saber qué elementos necesitaban ser reacomodados. Esto es porque estamos trabajando desde Mobile First.

Muchas veces es más fácil diseñar desde lo pequeño y luego ir creciendo según la necesidad de la pantalla que hacerlo al revés.

Ya sólo nos queda evaluar la página que hemos creado para comprobar temas de accesibilidad y buenas prácticas. ¡Genial!

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).