8
respuestas

[Duda] ¿Responsivo en 2023?

¡Saludos! Les hago una consulta: Fui replicando el código, paso a paso, para la construcción del sitio web. Me llevé una sorpresa al llegar al punto de ver que, usando las DevTools y visualizando el sitio con el formato del Iphone X... ¡y la página ya era responsiva! Probé inclusive diferentes modelos más pequeños, y el comportamiento era igual. No tuve necesidad de usar las @media querys como hizo Cristian, porque la página ya era responsiva. ¿Puede ser que desde el 2020 hasta ahora hayan habido cambios en el navegador Chrome, que identifiquen por default ciertas estructuras y apliquen automáticamente algún criterio para que la página, justamente, sea responsiva? Yo conocía algo muy básico de diseño Front-End y estaba mínimamente familiarizado con los conceptos, pero salvo algún que otro detalle menor, copié el código tal cual al de Cristian, para ver qué pasaba, y me llevé esta sorpresa.

8 respuestas

eso es raro al menos creo que hubiese compartido el codigo ya que cuando se adapta a dispositivos moviles hay que hacer varios cambios en la maquetacion.

Hola Andres. Me paso lo mismo que a ti. Antes de ponerme a escribir el codigo de @media querys que hizo Cristian, fui a ver la reaccion en diferentes pantallas. Y para mi sorpresa tambien, ya esta configurado por defecto para adaptarse a todos los dispositivos. Como tu dices, debe ser que en ese momento habia que hacerlo manualmente, y en la actualidad ya no es necesario. Saludos

El error esta en el meta.... debe ser: content="width=device-width" no debe ser: content="width:device-width"

cambiar el signo ":" por el signo "="

saludos

El profe así lo puso pero a mi no me lo detecta en automático

a mi con los : si se acomada a cualquiera en cambio con el = del profe, no

Me pasa exactamente igual, creí haber hecho algo distinto a Cristian pero copié el código de él tal cual y aún así todas las pantallas con las que probé ya estaban adaptadas :D

Lo que sucede NO es que no sea necesario hacer responsive o usar @media querys; lo que pasa concretamente es que depende de como maquetes y estililises, podrías ahorrarte el uso de los mismos. Está técnica se llama fluid design y la puedes encontrar en mi articulo.

https://bit.ly/fluid-design

Efectivamente tiene razón Mauricio Daniel Ramos al corregir la etiqueta meta en el html la página deja de verse bien y se ve igual que en el video de Cristian, no es que ya no se necesiten los @media queries, más bien como está mal la instrucción en html no se esta aplicando el viewport.

Cristian escribió el meta así:

<meta name="viewport" content="width-device-width">

Y el guión después del 1er. width debe ser un signo de igual, así:

<meta name="viewport" content="width=device-width">