Aprendiendo diseño responsive con media queries: tutoriales y ejemplos de código

hola, soy completamente profana en el tema responsive y me gustaría aprender

por ello agradecería si me dijerais algún sitio donde ver/leer un tutorial sobre media queries o diseño responsive

también me serviría alguna web de ejemplo que utilice bien las media queries, pero no con themes o plantillas de wordpress o similar, sino algo hecho a mano por alguno de vosotros

para empezar, lo que necesito es hacerme una idea mental de cómo se hace, qué hay que tener en cuenta paso a paso, y luego ya estudiaré la parte técnica

agradecería la ayuda de los expertos 🙂

Es simplemente jugar con el CSS y permitir que se vea correctamente para cualquier resolución. Tienes que evitar utilizar tamaños fijos en porcentajes y pixeles.

Por ejemplo, yo suelo centrar los elementos con margin: 0 auto y definir un tamaño de max-width para que las pantallas con mayor resolución utilicen el máximo tamaño definido y los que no tengan tanta resolución, utilicen un tamaño menor.

Son simplemente pequeños detalles. Y luego por otra parte están las queries, aquí tienes algunos ejemplos:

https://developer.mozilla.org/es/docs/CSS/Media_queries

zenok dijo:

Es simplemente jugar con el CSS y permitir que se vea correctamente para cualquier resolución. Tienes que evitar utilizar tamaños fijos en porcentajes y pixeles.

Hacer clic para expandir...

evitar los tamaños en porcentajes??? pero eso hace precisamente que no sean tamaños fijos

¿ que es mejor utilizar los em o los % ? pq he leído de todo

Todo depende del modo en que lo hagas, pero al menos que no sea un tamaño fijo en píxeles