El diseño responsivo (Responsive Design)consiste en un conjunto de herramientas para que tu sitio se vea bien en varias medidas de pantalla, esto incluye imágenes, tipografía, internacionalización de la página y entre otros.
En la actualidad, la mayoría de sitios web son visitados desde un celular, por lo que asegurarse que nuestro sitio sea responsivo para cualquier dispositivo es fundamental para optimizar las ganancias.
Qué son las media queries
Las media queries son reglas CSS que establecen un comportamiento distinto o diferentes estilos en un cierto rango de la pantalla. Esto sirve para establecer el layout del sitio web para diferentes tipos de pantalla: escritorio, tablets y celulares.
Estos son dos tipos de media querie :
max-width / max-height: establece un rango máximo para cierto comportamiento.
min-width / min-height: establece un rango mínimo para cierto comportamiento.
Estos valores son parecidos a condicionales, mientras se cumpla la condición, aplica determinados estilos.
Estructura de la media querie
La estructura de una media querie consiste en empezar con @media, seguido del tipo de la media querie estableciendo un rango, envolviendo las reglas CSS dentro de ese rango.
Para observar que los cambios se estén aplicando correctamente, las herramientas de desarrollador serán de gran ayuda.
Abre las herramientas del navegador y da clic en la opción ""Toggle device tool"", aquí podrás manipular la pantalla y observar en cuántos píxeles está ocurriendo determinados estilos.
Utiliza el siguiente ejemplo para visualizar cómo cambian los estilos según la longitud de la pantalla. Puedes revisar la media querie que está en el código. Aunque solo cambien el color de dos elementos, puede estar cualquier propiedad que desees, prueba con todo.
Una práctica muy recomendada en RESPONSIVE WEB DESIGN es tener en documentos separados los estilos para cada dispositivo y primero que todo seguir el patrón de diseño mobile first, diseñando la página primero para dispositivos móviles se vuelve mucho más fácil adaptar el diseño para tablets y computadoras.
Normalmente a mano, aunque puedes utilizar PostCSS para no preocuparte tanto por esto 😊o, incluso, algún framework de CSS (todo dependerá del resultado que quieras o necesites).
¡Hola!
Mobile first. Actualmente, hay más dispositivos mobile además de que son más accesibles y fáciles de llevar, estando al alcance de la mayoría de las personas, esto implica que tengas que asegurarte de ofrecer una buena experiencia en mobile pues probablemente se consumirá mucho desde ahí (podrías usar Analytics para comprobarlo). Es más fácil asegurar una buena experiencia empezando a desarrollar en mobile y de ahi escalarlo a desktop que en orden inverso.
Mobile first es sin duda la tendencia imperante en el desarrollo web
¿Por que?
El 91,5% de las personas utilizan su teléfono móvil como dispositivo preferido a la hora de conectarse a la Red, un 75,5% asegura que no podría vivir sin él (el 78% no podría vivir sin Internet), un 43,1% asegura que con el celular le “basta para hacer todo” lo que quiere hacer online y un 33,2% lo usa para pagar en comercios.
Responsive Design
Es una manera de que nuestra página web se vea bien en todas las medidas de dispositivos.
.
Para eso se utilizan los media queries, que nos ayudará a decir que cuando nuestra pantalla llegue a un cierto tamaño, podeamos cambiar los estilos.
tal vez no lo notaron, pero el uso de Flex o grid, en combinación ayuda muchísimo al responsiva ayudándonos a optimizar código y hacer menos líneas, también usando medidas relativas. Por ejemplo, (y me adelanto un poquito) me gusta trabajar con bootstrap, todas, o la mayoria, de sus clases son responsivas, el sistema de columnas es sencillo de implementar y los elementos o cajas se acomodarán de maravilla, y poco, o nada, usaríamos las medias qyerys, salvo que sea algo ya tan especfico y que no haya otra manera de resolverla.
chicos salio una nueva sintaxis ojala lo puedan ver y es que ahora se pueden usar los operadores mayor y menor para usar las medias queries dejo pantallaso saludos chicos
no se porque mi comentario salió el código 2 veces, si solo lo puse una vez en el bloque de código :/
¿Para qué es responsive design?
Es para que nuestro proyecto web pueda ser multiplataforma, que se pueda ver bien en un smartphone, desde una tablet, iPad y que se vean excelente desde una laptop o computadora de escritorio.
Esto realizándolo siempre con buenas prácticas.
Para empezar debemos saber:
Media Queries
Con los media queries podemos jugar con el layout, cuando la pantalla del dispositivo sea pequeña el contenido se ve de una forma, pero si está pantalla crece el contenido también lo hace sin perjudicar el diseño.
Podemos cambiar la orientación de los contenedores, podemos cambiar su orden, incluso cambiar las dimensiones.
Breakpoint
Son la dimensión en el viewport, es decir el width y el height de la pantalla, en donde vamos a generar un cambio.
Este cambio es la forma en la que puedo reposicionar ciertos elementos o redimensionar ciertos contenedores, todo esto para que se vea bien la web app y sin importar el dispositivo en el que se abra.
min-width
Esto quiere decir que cuando la pantalla sea igual o más grande que el valor que coloquemos, el código que esté adentro del media querie se va a ejecutar.
Pero si la pantalla es mayor a ese min-width habrá otro media querie que aplicará estilos diferentes.
max-width
Esto quiere decir que cuando la pantalla sea igual o más pequeña que el valor que coloquemos, el código que esté adentro del media querie se va a ejecutar.
La mejor forma de aplicar media queries
Tiene de nombre Mobile First o Mobile Only.
Esto quiere decir que el proyecto ya debe estar diseñado para dispositivos mobile, ya no debemos preocuparnos por que se vea bien desde una laptop o computadora de escritorio.
El diseño del proyecto va a partir desde un dispositivo mobile y desde ahí va a ir creciendo a los demás dispositivos con mayor pantalla.
Si hacemos lo contrario de ir de una pantalla grande a una más pequeña, esto se llama solamente responsive design y no es lo que estamos buscando.
Aplicado directo desde CSS con media queries
Arriba de los media queries vamos a tener el código base, que es el que está hecho y optimizado para dispositivos mobile.
Vamos a generar un breakpoint para realizar ciertos cambios en dispositivos más grandes.
Vamos a generar otro breakpoint que va a ser para una tablet o para computadoras con un viewport más pequeño como ser netbooks
Luego vamos a generar otro breakpoint que será para computadoras de escritorio, desktop o dispositivos con pantallas más grandes.
Orden para aplicar los media queries
Partimos desde los dispositivos más pequeños y terminamos con los dispositivos más grandes.
Si lo hacemos de forma inversa tendremos problemas, ya que como CSS funciona en cascada, nunca se van a aplicar los estilos de los medias queries con un viewport más grande.
Empezamos por:
Los celulares o dispositivos mobile.
Las tablets.
Laptops o computadores de escritorio.
Aplicado directo desde HTML (la mejor practica)
Este método se utiliza, ya que dependiendo del dispositivo donde esté el usuario va a necesitar un archivo CSS u otro, esto es para evitar que carguen archivos que el usuario no va a necesitar ni usar.
Lo agregamos en el head, aquí en vez de ligar un archivo de CSS vamos a ligar más de uno, dependiendo de los dispositivos en los que queramos aplicar los estilos.
Estilos enfocados a mobile
<linkrel="stylesheet"href="style.css">
Si tenemos archivos CSS que van a impactar en otros dispositivos con diferente viewport
<linkrel="stylesheet"href="tablet.css"media="screen and (min-width: 768px)"><linkrel="stylesheet"href="desktop.css"media="screen and (min-width: 1024px)">
Agregamos el atributo media cuyo valores va a ser el mínimo que necesitamos para hacer ese breakpoint, que es ese cambio en el layout.
Orden final
<linkrel="stylesheet"href="style.css"><!-- Los dispositiivos mobiles --><linkrel="stylesheet"href="tablet.css"media="screen and (min-width: 768px)"><linkrel="stylesheet"href="desktop.css"media="screen and (min-width: 1024px)">
según entendí la sintaxis, si lo pongo menor a 400px, debería tomarme el color morado, pero se queda negro [Es el que puse por defecto], adjunto el bloque de código @media (min-width<400px){ div{ background-color:blueviolet ; } } por si de pronto, lo puse mal 👻
