[Responsive Design] Media queries CSS para todos los dispositivos

Hace tiempo les presenté un post sobre cómo usar los media queries para que se apliquen estilos de acuerdo al tamaño de la pantalla del usuario. Esto nos sirve para hacer algo que se llama Responsive Design, que también ya vimos que sirve para que de acuerdo al dispositivo que tenga el usuario el sitio web se presente diferente, que el contenido se adecue a su pantalla, entre otras cosas.

Bueno, vi apenas ese post y no me gustó tanto porque no quedó tan claro cómo usarlas y cuando usarlas por ejemplo, cuando queremos que se vea nuestro sitio en un dispositivo que no sea un iPhone, ya que en la mayoría de los tutoriales que se encuentren el código va dirigido más que nada para adecuar el sitio al iPhone (reconozcamos que si, Apple fue de los primeros en implementar los queries) pero pues hoy en día hay muchos más teléfonos y si podemos ampliar nuestro rango de disponibilidad tendremos más usuarios contenidos, así que vamos a ver bien cómo aplicar los media queries.

Hay un cierto estándar para las pantallas actualmente, tanto para las computadoras de escritorio, tabletas y celulares inteligentes. En realidad las dimensiones de las pantallas varían demasiado, por eso hablo de que existe un cierto estándar, porque a pesar de que no hay medidas fijas si hay una pequeña distancia entre las pantallas de un dispositivo a otro, y la imagen lo ejemplifica muy bien.

El problema que se tiene es que en realidad a pesar de que hay 3 tipos de dispositivos la adecuación mínima es de 4, ya que con el formato de retrato y apaisado el teléfono entra en otro segmento de medidas que no cubre ningún otro dispositivo.

¿Cómo usarlo?

Aunque también se pueden configurar estilos con queries en archivos separados yo recomiendo ampliamente poner el código CSS en el archivo HTML, en el caso de que su sitio genere las páginas a partir de una plantilla, como los blogs lo los CMS, ya que de esa forma no tiene que tardar en cargar el CSS, lo carga de inmediato y el efecto de Responsive Design es mucho más fluido.