Media queries para un Responsive Design

Hola:

Como todos sabemos, en estos tiempos que corren es casi (por no decir completamente) imprescindible adaptar tu página web a todo los tipos de dispositivos desde los cuales el visitante puede acceder a ella. Es obvio que si un visitante entra en tu página web desde un smartphone o tablet (cosa cada vez más y más frecuente) y ve todo desordenado o es muy incómodo permanecer en la web, "lo hemos perdido".

Para solucionar esto existen un montón de soluciones para la más efectiva y recomendada es utilizar las media queries de CSS.
He buscado bastante por internet pero no he encontrado un texto donde listen las media queries básicas, y el objetivo de este post sería reunir unas cuantas para poder añadirlas a nuestra web.

¿Cuáles utilizáis para pantallas de escritorio? ¿Y para iPads, tablets, o smartphones?

Buena iniciativa.

Personalmente yo uso las media queries con los siguientes anchos:

480px -> Smarphone
680px -> Tablets
980px -> PCs normales
1100px -> Laptops o Monitores grandes

Y en base a ello comienzo a codear css.

Además recomiendo usar Bootstrap si son principiantes en el responsive design, es un excelente framework css.

Las medidas que yo utilizo son:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

Otra forma para saber es mirar la pagina de bootstrap:

http://getbootstrap.com/2.3.2/#responsive

En el navegador web mozilla firefox, tu puedes ver las medidas con las teclas:

Control + Shirt + M

En google chrome existe una extension llamado resolution test

Lo mismo en Chrome, desde la opcion Inspeccionar, en la pestaña movil (icono de movil en la izquierda), ahi van a encotrar las principales medidas.

depende bastante de la web.

Yo normalmente uso plantillas ya adaptadas pero las que he adaptado yo porque venían de una versión responsive no tome medidas sino que fui adaptando la web desde la versión más extensa a la más pequeña para móviles y iba generando los cortes en las media querys cuando se empezaba a ver mal.