En este mundo moderno donde todo es “mobile first” es casi obligatorio aplicar responsive design para que nuestra web se adapte a diferentes tipos de dispositivos, lo último que quisieramos es que alguien abra nuestro sitio web desde un teléfono, una tablet u otro dispositivo y de repente se rompa nuestro layout, es por ello que mediante este breve tutorial básico vamos a ver como aplicar responsive design:
Paso 1: Añadir media query a nuestro a nuestro documento css
<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Responsive Design</title><style>
@media()</style></head><body><div><h1>Responsive Design</h1></div></body>
Las media query nos permiten aplicar estilos segun el tipo general de un dispositivo, ya sea la resolucion de pantalla, el ancho o el alto de la pantalla del navegador, etc. Es decir que, segun ajustemos estas caracteristicas se aplican ciertos estilos que queramos.
Paso 2: Definir los parametros, propiedades y valores del media query
<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Responsive Designt</title><style>body {
background-color: aquamarine;
}
@media (max-width: 300px) {
body {
background-color: blue;
}
}
</style></head><body><div><h1>ResponsiveDesign</h1></div></body>
En este caso ya tenemos definido que en condiciones normales el body de nuestro documento tiene un color de fondo de agua marina. Por otro lado, en el media query primero definimos entre parentesis el max-width en 300px, con esto estamos diciendole a css que si el ancho de la pantalla se reduce hasta 300px se apliquen las siguientes condiciones, que en este caso es que el color de fondo del body sea azul.
Paso 3: Visualizar desde la consola del navegador
Cuando abrimos la consola del navegador, le hacemos click en la esquina superior izquierda de esta, y abrimos la barra de herramientas del dispositivo, al hacer esto podremos simular abrir nuestro sitio web en otro dispositivo ajustando el ancho y el alto de la pantalla.
Paso 4: Ajustar para ver el resultado
Al ajustar el width a 300px vemos que entra en accion el media query y le cambia el background color al body.
Esto es tan solo una pequeña y muy sencilla demostracion sobre como usar un media query, hay un mar de posibilidades y el tema del responsive design es mucho mas profundo, pero sin duda debemos empezar desde lo básico para poder dominar lo mas complejo, nunca paremos de aprender y sigamos creando 😎